- ACTUALIZADO PARA CATALINA Y SAFARI 13 (actualización de principios de 2020) *
NOTA: Los filtros y compiladores (como el motor SASS) esperan un código estándar de 'navegador cruzado', NO hacks CSS como estos, lo que significa que reescribirán, destruirán o eliminarán los hacks, ya que eso no es lo que hacen los hacks. Gran parte de esto es un código no estándar que se ha diseñado minuciosamente para apuntar solo a versiones de navegador único y no puede funcionar si se modifican. Si desea usarlo con ellos, debe cargar el hack CSS elegido después de cualquier filtro o compilador . Esto puede parecer un hecho, pero ha habido mucha confusión entre las personas que no se dan cuenta de que están deshaciendo un truco al ejecutarlo a través de un software que no fue diseñado para este propósito.
Safari ha cambiado desde la versión 6.1, como muchos han notado.
Tenga en cuenta: si está utilizando Chrome [y ahora también Firefox] en iOS (al menos en las versiones de iOS 6.1 y posteriores) y se pregunta por qué ninguno de los hacks parece estar separando Chrome de Safari, es porque la versión de iOS de Chrome está usando el motor Safari. Utiliza hacks de Safari, no los de Chrome. Más sobre eso aquí: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox para iOS se lanzó en otoño de 2015. También responde a Safari Hacks, pero ninguno de Firefox, igual que iOS Chrome.
TAMBIÉN: Si ha probado uno o más de los hacks y tiene problemas para que funcionen, publique un código de muestra (mejor aún, una página de prueba): el hack que está intentando y qué navegador (es) (versión exacta) están utilizando, así como el dispositivo que está utilizando. Sin esa información adicional, es imposible para mí o para cualquier otra persona aquí ayudarlo.
A menudo es una solución simple o falta un punto y coma. Con CSS, generalmente es ese o un problema de qué orden el código aparece en las hojas de estilo, si no solo errores de CSS. Por favor, pruebe los hacks aquí en el sitio de prueba. Si funciona allí, eso significa que el hack realmente funciona para su configuración, pero es algo más que debe resolverse. La gente aquí realmente ama ayudar, o al menos señalarle en la dirección correcta.
El sitio de prueba:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
¡Y ESPEJO!
https://browserstrangeness.github.io/css_hacks.html#safari
Fuera del camino aquí hay trucos para que uses para versiones más recientes de Safari.
Deberías probar este primero, ya que cubre las versiones actuales de Safari y solo es Safari puro:
Este todavía funciona correctamente con Safari 13 (principios de 2020):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Para cubrir más versiones, 6.1 y posteriores, en este momento debe usar el siguiente par de hacks css. El de 6.1-10.0 para ir con uno que maneja 10.1 y arriba.
Entonces, aquí hay uno que hice para Safari 10.1+:
La consulta de doble medio es importante aquí, no la elimine.
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Pruebe este si SCSS u otro conjunto de herramientas tiene problemas con la consulta de medios anidados:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
El siguiente funciona para 6.1-10.0 pero no para 10.1 (actualización de finales de marzo de 2017)
Este truco que creé durante muchos meses de pruebas y experimentación combinando varios otros trucos.
NOTAS: como en el caso anterior, la consulta de medios dobles NO es un accidente: descarta muchos navegadores antiguos que no pueden manejar el anidamiento de consultas de medios. - El espacio que falta después de uno de los 'y' también es importante. Después de todo, esto es un truco ... y el único que funciona para 6.1 y todas las versiones más nuevas de Safari en este momento. También tenga en cuenta que, como se detalla en los comentarios a continuación, el hackeo es CSS no estándar y debe aplicarse DESPUÉS de un filtro. Los filtros como los motores SASS lo reescribirán / deshacerán o lo eliminarán por completo.
Como se mencionó anteriormente, consulte mi página de prueba para ver cómo funciona tal como está (¡sin modificaciones!)
Y aquí está el código:
/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Para más Safari CSS 'específico de la versión', continúe leyendo a continuación.
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Uno para Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Uno para Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Obras ligeramente modificadas para 10.1 (solo):
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0 (dispositivos que no son iOS):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 CSS Hacks:
Un simple truco de consulta de funciones para Safari 9.0 y versiones posteriores:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Un simple hack de subrayado para Safari 9.0 y superior:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Otro para Safari 9.0 y superior:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
y otra consulta de características de soporte también:
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Uno para Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 ahora incluye detección de funciones para que podamos usar eso ahora ...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Ahora solo para dispositivos iOS. Como se mencionó anteriormente, dado que Chrome en iOS está enraizado en Safari, por supuesto, también afecta a ese.
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
uno para Safari 9.0+ pero no para dispositivos iOS:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Y uno para Safari 9.0-10.0 pero no para dispositivos iOS:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
A continuación se muestran los hacks que separan 6.1-7.0 y 7.1+. Estos también requieren una combinación de múltiples hacks para obtener el resultado correcto:
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
Como he señalado la forma de bloquear dispositivos iOS, aquí está la versión modificada del hack Safari 6.1+ que apunta a dispositivos que no son iOS:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Para usarlos:
<div class="safari_only">This text will be Blue in Safari</div>
Por lo general, [como en esta pregunta], la razón por la que la gente pregunta sobre los hacks de Safari se debe principalmente a la separación de Google Chrome (¡otra vez NO a iOS!) Puede ser importante publicar la alternativa: cómo apuntar a Chrome por separado también de Safari, por lo que Te lo estoy proporcionando aquí en caso de que sea necesario.
Aquí están los conceptos básicos, nuevamente revise mi página de prueba para ver muchas versiones específicas de Chrome, pero estas cubren Chrome en general. Chrome es la versión 45, las versiones Dev y Canary son hasta la versión 47 en este momento.
Mi antiguo combo de consulta de medios que puse en el navegador todavía funciona solo para Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Una consulta de función @supports también funciona bien para Chrome 29+ ... una versión modificada de la que estábamos usando para Chrome 28+ a continuación. Safari 9, los próximos navegadores de Firefox y el navegador Microsoft Edge no están disponibles con este:
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Anteriormente, Chrome 28 y versiones posteriores eran fáciles de orientar. Este es uno que envié a los exploradores de navegador después de verlo incluido dentro de un bloque de otro código CSS (no originalmente pensado como un hack CSS) y me di cuenta de lo que hace, así que extraje la parte relevante para nuestros propósitos:
[NOTA:] Este método anterior a continuación ahora muestra Safari 9 y el navegador Microsoft Edge sin la actualización anterior. Las próximas versiones de Firefox y Microsoft Edge han agregado soporte para múltiples códigos CSS -webkit- en su programación, y tanto Edge como Safari 9 han agregado soporte para la detección de funciones @supports. Chrome y Firefox incluyeron @supports anteriormente.
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
El bloque de las versiones de Chrome 22-28 (si es necesario para admitir versiones anteriores) también es posible apuntar con un giro en mis hacks combinados de Safari que publiqué anteriormente:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
Al igual que los hacks de formato CSS de Safari anteriores, estos se pueden usar de la siguiente manera:
<div class="chrome_only">This text will be Blue in Chrome</div>
Para que no tenga que buscarlo en esta publicación, aquí está mi página de prueba en vivo nuevamente:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[O el espejo]
https://browserstrangeness.github.io/css_hacks.html#safari
La página de prueba también tiene muchos otros, específicamente basados en la versión para ayudarlo a diferenciar entre Chrome y Safari, y también muchos hacks para los navegadores web Firefox, Microsoft Edge e Internet Explorer.
NOTA: Si algo no funciona para usted, primero revise la página de prueba, pero proporcione un código de ejemplo y QUÉ pirateo está intentando que alguien lo ayude.