Tag: Hacks css

Sometimes when we are with the front-end of any website, we run into some problems with the different browsers, which generate quite a lot of discomfort and headache. Well let me tell you that there is a shortcut to target them with a simple csso rule (css hacks) and all your difficulties will be over. We will only give you the main ones and the ones most used by the audience. My main advice is that you do everything thinking about Google’s super powerful Chrome and from there put the hacks for the rest. But if you will not listen to me, I start by leaving you the first one that points only to 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
}