¿Qué trucos de CSS puro específicos de Safari existen?

Question

Me pregunto si hay alguna forma de escribir CSS específicamente para Safari usando solo CSS.Sé que tiene que haber algo por ahí, pero aún no lo he encontrado.

Answer 1

Creo que la pregunta es válida.Estoy de acuerdo con las otras respuestas, pero eso no significa que sea una pregunta terrible.Solo tuve que usar un truco de CSS de Safari una vez como solución temporal y luego me deshice de él.Estoy de acuerdo en que no deberías tener como objetivo sólo Safari, pero no está de más saber cómo hacerlo.

Para su información, este truco solo está dirigido a Safari 3 y también a Opera 9.

@media screen and (-webkit-min-device-pixel-ratio:0) {
   /* Safari 3.0 and Opera 9 rules here */
}

Answer 2

Hay algunos trucos que puedes usar en CSS para apuntar solo a Safari, como poner un hash/almohadilla (#) después del punto y coma, lo que hace que Safari lo ignore.Por ejemplo

.blah { color: #fff; }
.blah { color: #000;# }

En Safari el color será blanco, en todo lo demás será negro.

Sin embargo, no deberías utilizar hacks, ya que podrían causar problemas con los navegadores en el futuro y pueden tener efectos no deseados en navegadores más antiguos.La forma más segura es utilizar un lenguaje del lado del servidor (como PHP) que detecte el navegador y luego muestre un archivo CSS diferente dependiendo del navegador que esté utilizando el usuario, o puede usar JavaScript para hacer lo mismo y cambiar a un archivo CSS diferente.

El lenguaje del lado del servidor es la mejor opción aquí, ya que no todos tienen JavaScript habilitado en su navegador, lo que significa que no verán el estilo correcto.Además, JavaScript agrega una sobrecarga a la cantidad de información que debe cargarse antes de que la página se muestre correctamente.

Safari usa WebKit, que es muy bueno para renderizar CSS.Nunca me he encontrado con nada que no funcione en Safari, pero sí en otros navegadores modernos (sin contar IE, que tiene sus propios problemas).Sugeriría asegurarse de que su CSS sea Cumple con los estándares, ya que el problema puede estar en el CSS y no en Safari.

Answer 3

Espera, ¿quieres escribir CSS para Safari usando solo CSS?Creo que respondiste tu propia pregunta.Webkit tiene muy buen soporte CSS.Si está buscando estilos solo de webkit, pruebe aquí.

Answer 4

Tendría que usar JavaScript o su servidor para rastrear el agente de usuario y poder enviar CSS específicamente a Safari/WebKit.

Answer 5

@pantalla multimedia y (-webkit-min-device-pixel-ratio:0) {}

Esto parece apuntar a webkit (incluido Chrome)...¿O es realmente sólo para Safari?

Answer 6

Esto realmente depende de lo que estés intentando hacer.¿Está intentando hacer algo especial solo en Safari utilizando algunas de las funciones CSS3 incluidas o está intentando hacer que un sitio sea compatible con varios navegadores?

Si está intentando hacer que un sitio sea compatible con varios navegadores, le recomiendo escribir el sitio para que se vea bien en safari/firefox/opera usando CSS correcto y luego realizar cambios para IE usando CSS condicional incluido en IE.Esto debería (con suerte) brindarle compatibilidad para el futuro de los navegadores, que están mejorando en el seguimiento de las reglas CSS y brindar compatibilidad entre navegadores. Esto es un ejemplo.

Al utilizar hojas de estilo condicionales, puede evitar ataques por completo y dirigirse a los navegadores.

Si buscas hacer algo especial en safari echa un vistazo este.