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 el gigante de Microsoft.
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:
Tengo que decirles que por ahora solo les puedo aportar una solución usando PHP porque de momento todas las demás que he probado no me han funcionado.
En el ejemplo de aqui abajo hemos almacenado en la varaible $UserAgent el User Agent (información del sistema operativo y navegador) del usuario, después usando la función PHP preg_match() comparo la cadena devuelta para averiguar si es un Ipad, iPhone o un Mac.
El delimitador ‘i’ de la funcíon de comparación hace que no se distingan mayúsculas y minúsculas.
<?php
$UserAgent = $_SERVER['HTTP_USER_AGENT'];
//console_log($UserAgent);
if (preg_match("/iPhone/i", $UserAgent) || preg_match("/iPad/i", $UserAgent) || preg_match("/Macintosh/i", $UserAgent) ) {
$ClassAdd = 'safari-mac';
} else {
$ClassAdd = '';
}
?>
Luego esta variable la imprimimos en el body de nuestro html, como una clase para luego apuntar a ella por CSS3 de ser necesario.
<body class="<?php echo $ClassAdd;?>">