¿hay un truco css para safari solo NO Chrome?

183

Estoy tratando de encontrar un truco css para safari NO Chrome, sé que ambos son navegadores webkit, pero tengo problemas con las alineaciones div en Chrome y Safari, cada uno se muestra de manera diferente.

He estado tratando de usar esto, pero también afecta a Chrome,

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

¿Alguien sabe de otro que se aplicará al safari por favor?

Oso juan
fuente
Al no usar CSS, deberá usar javascript. stackoverflow.com/questions/5899783/detect-safari-using-jquery
Christian
Me interesaría más el problema real que una solución frágil y hacky. ¿Está (todavía) disponible en alguna parte?
Matijs
Para las personas que publican "no funciona", tenga en cuenta que necesita saber la versión de Safari que está probando. No hay una solución Safari 'general' para cada versión. Debe proporcionar esa información con su publicación o nadie puede ayudarlo a encontrar una solución.
Jeff Clayton
Las diferentes versiones de Safari tienen diferentes necesidades: consulte aquí para ver ejemplos en vivo: browserstrangeness.bitbucket.io/css_hacks.html#safari [O The Mirror] browserstrangeness.github.io/css_hacks.html#safari
Jeff Clayton

Respuestas:

357
  • 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.

Jeff Clayton
fuente
9
Solo quiero decir que la página de prueba es increíble. ¡Ahora puedo navegar a ese sitio con cualquier dispositivo y ver qué reglas de CSS son aplicables!
duyn9uyen
1
¿Se aplicará esto a Safari en iPhone o iPad?
Greg Rozmarynowycz
1
en realidad, acabo de resolver mi propia pregunta usando una combinación del ejemplo anterior Y el (; propiedad: valor;); a continuación y funcionó muy bien!
mydoglixu
1
El truco para Safari 6.1+ en la parte superior de esta respuesta arroja un error en el compilador Sass. ¿Hay alguna manera de resolverlo?
Mirlo
2
@Blackbird Lo siento, pero no puedes compilar o filtrar los hacks, los arruina. Deben usarse tal cual. (Agréguelos al archivo css completo después de la compilación). El hecho de que no sean estándar es la razón por la que funcionan.
Jeff Clayton
89

Hay una forma de filtrar Safari 5+ desde Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .myClass {
     color:red;
    }

    /* Safari only override */
    ::i-block-chrome,.myClass {
     color:blue;
    }
}
usuario2550776
fuente
3
jeffclayton.wordpress.com/2014/07/22/… - He estado trabajando en muchos ( pruebo y creo hacks css para browserhacks.com) y prueba la página aquí: browserstrangeness.bitbucket.org/css_hacks.html#webkit
Jeff Clayton
Nota: en iOS [probado en iOS 7], la versión de Chrome en realidad está ejecutando el motor de safari, por lo que en ipads o iphones, utiliza los hacks de safari. Para otros dispositivos, son diferentes.
Jeff Clayton
Entonces, ¿básicamente el código en la respuesta funciona para Safari 5.0 y 6.0 y no 6.1+?
Nic Cottrell
Para ser absolutamente exactos, la construcción :: i-block-chrome, .myClass {} solo permite Safari 5.1-6.0, pero también Chrome 10-24 (la versión antigua de Chrome ya no se usa, así que no vale la pena mencionarla) pero nada más nuevo - Los hacks de Safari tienden a funcionar así: un lote maneja 5.1-6.0, otro maneja 6.1-7.0, y los más nuevos manejan 7.1-8.0. Parecen actualizar mucho las cosas hasta que deciden ir a la próxima versión numérica que está muy cerca de la versión anterior '.1'.
Jeff Clayton
En el momento de esta respuesta en 2013, Safari 6.1 acababa de ser lanzado, por lo que no suficiente gente había visto que el navegador había cambiado, por lo que este era el más preciso en ese momento. Si necesita más nuevos, consulte mi respuesta a continuación. Esta fue una gran respuesta en el momento en que se proporcionó. Sin embargo, el tiempo cambia, así que publiqué mi trabajo como una actualización de este. Me llevó meses crear los 6.1-7.0 y 7.1-8.0. Espero que les gusten los resultados. Lo más probable es que cuando se lance una versión 8.1 si sigue el patrón, también requerirá un hack diferente. De nuevo, sólo el tiempo lo dirá.
Jeff Clayton
21

Solo sarari

.yourClass:not(:root:root){ 
    /* ^_^ */ 
}
xicooc
fuente
8
¿Quieres añadir alguna explicación? ¿Literalmente escribo root: root?
Nubtacular
1
Este es exactamente correcto para Safari 3.x (y Chrome versión 1.0 solo aunque nadie usa Chrome 1.0 ya que ahora está en los años 30 ...)
Jeff Clayton
Este ahora también se dirige a Safari 9.0, por lo que las estadísticas completas se han actualizado: / * Chrome 1.0, Safari 3.X, Safari 9.0+ * /
Jeff Clayton
44
El :not(:root:root)selector no es válido de acuerdo con la especificación CSS Selectors 3 (en el que :not()puede contener solo un selector simple, es decir, un selector de tipo o una ID o una clase o una pseudo-clase), pero completamente válido de acuerdo con CSS Selectors 4 (donde :not()acepta la lista de selectores). Es cierto que actualmente solo Safari comprende la sintaxis de CSS Selectors 4, pero esta solución no está preparada para el futuro.
Ilya Streltsyn
2
Muy pocos hacks no son (y mucho código estándar real no se debe a cambios en la versión) prueba futura. El mejor plan es si vas a usar un hack css, úsalo solo como una solución temporal para ganar tiempo para hacer una actualización más oficial del navegador cruzado.
Jeff Clayton
14

Este truco 100% funciona solo para safari 5.1-6.0. Lo acabo de probar con éxito.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .yourcssrule {
        your css property
    }
}
Veka0881
fuente
3
Este truco es en realidad para Chrome y Safari en diferentes versiones. Permite Chrome 10-24 (que ya nadie usa, por eso la gente mencionó que bloqueó Chrome) y Safari 5.1-6.0 solamente. Sin embargo, no funciona para Safari 6.1 y posteriores. En ese momento no había mejor truco de este tipo.
Jeff Clayton el
1
@ veronica-lotti, esto también funcionó para mí. Te deshaces de mi dolor de cabeza. Gracias
Andhi Irawan
Gente, tenga cuidado. Lo que describen estos comentarios es un método que no funciona para las versiones de Safari en los últimos años y solo funciona para versiones anteriores. Lo que eso realmente significa es que la mayoría de las personas en Internet no tendrán el resultado que está buscando, sino solo las personas con computadoras más antiguas. Esto no funciona para los sistemas operativos actuales. En este momento, la mayoría de las personas tienen la versión 12 y superior (no 6.0 y menor, que eran actuales solo durante la era de Windows XP)
Jeff Clayton
8

Para aquellos que desean implementar un hack para Safari 7.0 y versiones posteriores, pero no 7.1 y versiones posteriores, use:

.myclass { (;property: value;); }
.myclass { [;property: value;]; }
Stifboy
fuente
Lo probé en Safari 7 y no pude hacerlo funcionar. ¿Puedes dar un ejemplo de trabajo por casualidad?
Jugoso
@Juicy: Hay pruebas en vivo de estos en browserhacks.com: funcionan en Safari 7 y versiones anteriores, y también en Chrome 28 y versiones inferiores. (Como se mencionó en otra publicación iOS 7 y 8, tal vez otros también utilicen el motor Safari para Chrome, por lo que Chrome y Safari en iPads son realmente Safari)
Jeff Clayton
Es posible que lo haya intentado en Safari 7.1, no en Safari 7.0. Es válido para 7.0 y anteriores, no para 7.1 y posteriores. Cuando se publicó esta respuesta, 7.0 era la última versión de Safari, por lo que era cierto en ese momento.
Jeff Clayton
funciona para Safari para Windows (versión 5.1.7 (7534.57.2))
jave.web
funciona para Safari para Mac (Versión 6.0.2 (7536.26.17))
Merlin
6

Reemplace su clase en (.myClass)

/ * Solo Safari * / .myClass: not (: root: root) { enter code here }

Trinesh GD
fuente
Este es bueno para Safari: el único otro navegador al que se dirige es Chrome 1 (ya nadie usa Chome 1)
Jeff Clayton
Especificaciones exactas para las personas que no usan las últimas Mac: Chrome 1, Safari 3.X, Safari 9.0+ (no Safari 4-8)
Jeff Clayton
Esto funciona con la última versión de Safari 7+ y, por lo que puedo decir, debería ser la respuesta aceptada.
Jason Engage
¡Guau, gracias, esto finalmente funcionó para mí después de probar tantos hacks de navegador para Safari!
FairyQueen
4

Por cierto, para cualquiera de ustedes que solo necesiten apuntar a Safari en móviles, simplemente agreguen una consulta de medios a este truco:

@media screen and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root .safari_only {
        padding: 10px; //or any property you need
    }
}

Y no olvide agregar la clase .safari_only al elemento que desea orientar, por ejemplo:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari  </div>
Juanma Menéndez
fuente
4

Me gusta usar el siguiente método:

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) { 
  $('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">') 
};
Brandon Webster
fuente
Este método de pirateo de JavaScript requiere que se instale el paquete JQuery.
Jeff Clayton el
Esto se considera una práctica extremadamente mala, el rastreo del navegador es muy propenso a errores y conduce a montones de falsos positivos. No haga esto, incluso el rastreo de consultas de medios está muy sucio, pero podría ser aceptable para cambios muy pequeños.
Wannes
3

Al usar este filtro solo para safari, podría apuntar a Safari (iOS y Mac), pero excluir Chrome (y otros navegadores):

@supports (-webkit-backdrop-filter: blur(1px)) {
  .safari-only {
    background-color: rgb(76,80,84);
  }
}
iguido
fuente
2

Paso 1: use https://modernizr.com/

Paso 2: use la clase html .regions para seleccionar solo Safari

a { color: blue; }
html.regions a { color: green; }

Modernizr agregará clases html al DOM según lo que admita el navegador actual. Safari admite regiones http://caniuse.com/#feat=css-regions, mientras que otros navegadores no lo hacen (todavía de todos modos). Este método también es muy efectivo para seleccionar diferentes versiones de IE. Que la fuerza esté con usted.

hawkeye126
fuente
1
modernizr es un gran complemento de javascript para sitios web para identificar navegadores, ¡excelente herramienta! - este truco funcionará (como otros) hasta que otros navegadores decidan admitir la función de regiones
Jeff Clayton
1
Las regiones CSS ya no son compatibles.
1stthomas
2
Regions me permite apuntar a Safari 6.1 a 11 y 7.1 a 11.2 en iOS y eso solo ya es genial.
lowtechsun
@lowtechsun: excelente publicación de sus estadísticas sobre esto, los hacks solo son buenos para saber a qué navegadores apuntan.
Jeff Clayton
2

hola he hecho esto y funcionó para mí

@media(max-width: 1920px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 5.5% !important;
        }
    }
}

@media(max-width: 1680px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 15% !important;
        }

    }
}

@media(max-width: 1600px){
    @media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 18% !important;
        }

    }
}


@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {

        .photo_row2 {
            margin-left: 24.5% !important;
        }

    }

}


@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
    @media {
        .photo_row2 {
            margin-left: -11% !important;
        }

    }

}
ChiiiN
fuente
Este es un buen conjunto, buen uso del truco con múltiples configuraciones de dispositivo para sitios web que utilizan vistas receptivas.
Jeff Clayton
2

Nota: Si solo iOS es suficiente (si está dispuesto a sacrificar el escritorio Safari), entonces esto funciona:

    @supports (-webkit-overflow-scrolling: touch) {
    /* CSS specific to iOS devices */ 
    }
Andy
fuente
1

Puede usar un truco de consulta de medios para seleccionar Safari 6.1-7.0 de otros navegadores.

@media \\0 screen {}

Descargo de responsabilidad: este truco también está dirigido a versiones antiguas de Chrome (antes de julio de 2013).

tzi
fuente
No funciona en el Safari más nuevo, sin embargo, las estadísticas de este son quirúrgicas: Safari 6.1-7.0, Chrome 22-28 tan útil.
Jeff Clayton el
0

Esto funciona:

@media not all and (min-resolution:.001dpcm) { 
  @media {
    /* your code for Safari Desktop & Mobile */
    body {
      background-color: red;
      color: blue;
    }
    /* end */
  }
}
Jorge Epuñan
fuente
0

Al final uso un poco de JavaScript para lograrlo:

if (navigator.vendor.startsWith('Apple'))
    document.documentElement.classList.add('on-apple');

luego, en mi CSS para apuntar al motor del navegador Apple, el selector será:

.on-apple .my-class{
    ...
}
Daniel De León
fuente
0

https://stackoverflow.com/a/17637937/3174065 se responde aquí, aunque este método utiliza algunos JS. si se usa, asegúrese de poner el js en el pie de página, el cuerpo tiene que estar completamente cargado para que se dispare correctamente, cuando se coloca en la cabeza, se equivoca porque se dispara antes de cargar el cuerpo.

luego agrega una clase .safari al cuerpo, pero solo en safari, lo que hace que apuntar al css sea muy fácil.

Preston Reyes
fuente
-1

Funciona 100% en safari ... lo intenté

@media screen and (-webkit-min-device-pixel-ratio:0) 
{
::i-block-chrome, Class Name {your styles}
}
S.karthik
fuente
Esto funciona en versiones anteriores de Safari, no en las actuales, 6.1 y posteriores.
Jeff Clayton
-1

He probado y funcionó para mí

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
 ::i-block-chrome, .myClass {
    height: 1070px !important;
  }
}
Atif Tariq
fuente