Me pregunto si hay alguna manera 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.¿Qué hacks de CSS puros específicos de Safari están disponibles?
Creo que la pregunta es válida. Estoy de acuerdo con las otras respuestas, pero eso no significa que sea una pregunta terrible. Solo he tenido que usar un hack de Safari CSS una vez como solución temporal y luego me deshice de él. Estoy de acuerdo en que no debería tener que apuntar solo a Safari, pero no dañará saber cómo hacerlo.
su información, este truco sólo se refiere a Safari 3, y también apunta a Opera 9.
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}
Así que espera, ¿quieres escribir CSS para Safari usando solo CSS? Creo que respondiste tu propia pregunta. Webkit tiene un buen soporte CSS. Si busca solo estilos de webkit, intente here.
Tendría que usar JavaScript o su servidor para hacer sniffing de agente de usuario para enviar CSS específicamente a Safari/WebKit.
Hay algunos hacks que puedes usar en el CSS para apuntar solo a Safari, como poner un hash/pound (#) 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 debe utilizar hacks, ya que podría causar problemas con los navegadores en el futuro, y puede tener efectos no deseados en los navegadores más antiguos. La forma más segura es utilizar un idioma del lado del servidor (como PHP) que detecta el navegador y luego sirve un archivo CSS diferente según el navegador que esté utilizando, o puede usar JavaScript para hacer lo mismo, y cambiar a un archivo CSS diferente
El idioma 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 se debe cargar antes de que la página se muestre correctamente.
Safari usa WebKit, que es muy bueno con la renderización de 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 standards compliant, ya que el problema puede estar en el CSS y no en Safari.
Esto no funciona. –
Eso es probablemente porque WebKit fue corregido para hacerle frente. Esta respuesta fue de 2008, cuando el truco anterior funcionó en Safari. El hecho de que no funciona ahora solo resalta el punto que estaba haciendo acerca de no usar hacks en primer lugar, ya que no se garantiza que funcionen siempre en el futuro. –
Buen punto. :-) –
Esto realmente depende de lo que está tratando de hacer. ¿Estás tratando de hacer algo especial solo en safari usando algunas de las características de CSS3 incluidas o estás tratando de hacer que un navegador cross-site sea compatible?
Si está intentando hacer un sitio compatible con los navegadores cruzados, recomiendo escribir el sitio para que se vea bien en safari/firefox/opera usando CSS correcto y luego hacer cambios para IE usando CSS condicional incluido en IE. Esto debería (con suerte) darle compatibilidad para el futuro de los navegadores, que mejoran al seguir las reglas de CSS, y proporcionar compatibilidad con navegadores cruzados. This is an example.
Mediante el uso de hojas de estilo condicionales, puede evitar todos los hackers y navegadores de destino.
Si está buscando hacer algo especial en safari echa un vistazo a this.
pantalla @media y (ratio webkit-min-device-pixel: 0) {}
Esto parece apuntar webkit (incluyendo Chrome) ... o esto es verdaderamente Safari- ¿solamente?
también se dirige a Chrome ahora - 2016 –
¿Cómo podría este objetivo Opera? Se dirige a Safari y Chrome, que utilizan el motor WebKit. –
Fuente original de hack aquí: http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/. Adición: Admitió Opera 9, pero no Opera 9.5. Este truco se concibió originalmente en 2007, por lo que probablemente esté bastante desactualizado en 2011. –