Regla Css3 para los principales navegadores. Hacks Css. (Actualizado 2022)

A veces cuando estamos con el front-end de cualquier sitio web, nos topamos con algunos problemas con los diferentes navegadores, que nos generan bastante malestar y dolor de cabeza. Pues dejame decirte que hay un atajo para apuntar a ellos con una simple regla csso (hacks css) y se acabaran todos tus dificultades. Solo les daremos de los principales y los más usados por la audiencia. Mi principal consejo es que hagas todo pensando en el super poderoso Chrome de Google y a partir de allí pongas los hacks para el resto. Pero si no me harás caso pues empiezo dejándote el primero que apunta solo a Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0)
{ 
    #element { properties:value; } 
}

El siguiente será solo para todas las versiones de Firefox:

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

A continuación les dejaremos los dos del gigante de Microsoft.
Internet explorer:

@media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }

Microsoft Edge Browser:

/* Microsoft Edge Browser 12+ (All) - @supports method */
 
@supports (-ms-ime-align:auto) {
  .selector { property:value; }
}
 
/* Microsoft Edge Browser 15+ - @supports method */
 
@supports (-ms-ime-align:auto)
and (-webkit-text-stroke:initial) {
  .selector { property:value; }
}

y por último les dejamos el navegador favorito de la manzanita. Safari:

html[xmlns*=""] .tuclaseoetiqueta{
  // Tu código
}