solo - ¿Hay algún truco de CSS para safari que NO sea Chrome?
webkit css (12)
Estoy tratando de encontrar un css hack para safari NO Chrome, sé que ambos son navegadores webkit pero estoy teniendo problemas con las alineaciones div en cromo y safari, cada uno muestra de forma 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á a safari por favor?
Este hack 100% funciona solo para safari. Acabo de probarlo con éxito.
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .yourcssrule {
your css property
}
}
Funciona al 100% en safari ... lo intenté
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
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;
}
}
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">'')
};
Para aquellos que quieran implementar un hack para Safari 7.0 y versiones posteriores, pero no 7.1 o superior, use:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
Paso 1: usa https://modernizr.com/
Paso 2: usa 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 sea compatible con el navegador actual. Safari admite regiones http://caniuse.com/#feat=css-regions mientras que otros navegadores no (aún de todos modos). Este método también es muy efectivo para seleccionar diferentes versiones de IE. Que la fuerza esté con usted.
Por cierto, para cualquiera de ustedes que solo necesita apuntar a Safari en teléfonos 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 se olvide de agregar la clase .safari_only al elemento que desea segmentar, por ejemplo:
<div class=''safari_only''> This div will have a padding:10px in a mobile with Safari </div>
Puede usar un hack de consulta de medios para seleccionar Safari 7+ de otros navegadores.
@media //0 screen {}
Descargo de responsabilidad: este truco también se dirige a versiones antiguas de Chrome (antes de julio de 2013).
Reemplaza tu clase en (.myClass)
/ * Safari only * / .myClass: not (: root: root) { enter code here }
Solo Sarari
.yourClass:not(:root:root){
/* ^_^ */
}
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;
}
}
}
- ACTUALIZADO PARA SAFARI 11 (Actualización Otoño 2017) *
NOTA: Los filtros y compiladores (como el motor SASS) esperan un código estándar de "navegador cruzado". NO CSS piratea 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. Este es un código no estándar que ha sido cuidadosamente diseñado para dirigirse solo a versiones de navegador único y no puede funcionar si se modifican. Si desea usarlo con esos, debe cargar el hack CSS seleccionado DESPUÉS de cualquier filtro o compilador . Esto puede parecer obvio, 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 dicho 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 usa 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 separar 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/
TAMBIÉN: Si ha probado uno o más de los hacks y tiene problemas para lograr que funcionen, publique código de muestra (mejor aún una página de prueba): el hack que está intentando y qué navegador (s) (¡versión exacta!) están usando tan bien como el dispositivo que estás usando. Sin esa información adicional, es imposible que yo o alguien más aquí te ayude.
A menudo es una solución simple o falta un punto y coma. Con CSS suele ser eso o un problema de qué orden el código aparece en las hojas de estilo, si no solo los errores de CSS. Por favor, prueba los hacks aquí en el sitio de prueba. Si funciona allí, eso significa que el truco realmente está funcionando para su configuración, pero es algo más que necesita ser resuelto. A la gente de aquí realmente le encanta ayudar, o al menos apuntar en la dirección correcta.
El sitio de prueba:
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
¡Y ESPEJO!
https://browserstrangeness.github.io/css_hacks.html#webkit
Firefox para iOS fue lanzado en otoño de 2015, y también responde a los hacks de Safari, pero ninguno de los Firefox, al igual que iOS Chrome.
Que fuera del camino aquí hay hacks para que puedas usar para versiones más recientes de Safari.
Deberías probar esto primero, ya que cubre las versiones actuales de Safari y solo es Safari puro:
Este todavía funciona correctamente con Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Para cubrir más versiones, 6.1 y superiores, en este momento debe usar el siguiente par de hacks de 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+ (which is the latest version of Safari at this time) */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Pruebe esto 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 10.1 (Actualización de marzo de 2017)
Este truco que creé durante muchos meses de pruebas y experimentación mediante la combinación de muchos otros hacks.
NOTAS: como en el caso anterior, la consulta de doble medio NO es accidental: descarta muchos navegadores antiguos que no pueden manejar el anidamiento de consultas de medios. - El espacio faltante después de uno de los ''y'' es importante también. Esto es, después de todo, un truco ... y el único que funciona para 6.1 y todas las versiones de Safari más nuevas en este momento. Además, tenga en cuenta que, como se detalla en los comentarios a continuación, el hack es un CSS no estándar y debe aplicarse DESPUÉS de un filtro. Los filtros como los motores SASS reescribirán / deshacerán o lo eliminarán por completo.
Como mencioné anteriormente, compruebe mi página de prueba para ver cómo funciona tal cual (¡sin modificaciones!)
Y aquí está el código:
/* Safari 6.1-10.0 (not 10.1, which is the latest version of Safari at this time) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Para obtener más información sobre 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;
}
}}
Trabajos levemente modificados 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;
}
}}
Uno para Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .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:
Uno para Safari 9.0 y superior:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
y una 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 características 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 lo hace.
/* 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 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 incluyen los hacks que separan 6.1-7.0 y 7.1+. Estos también requieren una combinación de varios 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 manera de bloquear dispositivos iOS, aquí está la versión modificada del hack de Safari 6.1+ que se dirige 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 las personas preguntan sobre los hacks de Safari es sobre todo para separarlo de Google Chrome (¡NO iOS!). Puede ser importante publicar la alternativa: cómo segmentar Chrome por separado de Safari, entonces Se lo proporciono aquí en caso de que sea necesario.
Estos son los aspectos básicos, nuevamente verifique en mi página de prueba muchas versiones específicas de Chrome, pero estas cubren a Chrome en general. Chrome es la versión 45, las versiones Dev y Canary tienen hasta la versión 47 en este momento.
Mi antiguo combo de consulta de medios que puse en navegadores aún 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 Firefox y el navegador Microsoft Edge no se recogen 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 más nuevos eran fáciles de orientar. Este es uno que envié a navegadores después de verlo incluido dentro de un bloque de otro código CSS (que originalmente no era un hack de 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 compatibilidad con varios códigos CSS de sitios web en su programación, y tanto Edge como Safari 9 han agregado soporte para la detección de características de @supports. Chrome y Firefox incluyeron @supports previamente.
/* 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 versiones de Chrome 22-28 (si es necesario para admitir versiones anteriores) también es posible orientar con un giro en mis ataques 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 formateo CSS de Safari anteriores, estos se pueden usar de la siguiente manera:
<div class="chrome_only">This text will be Blue in Chrome</div>
Entonces no tiene que buscarlo en esta publicación, aquí está mi página de prueba en vivo otra vez:
https://browserstrangeness.bitbucket.io/css_hacks.html#webkit
[O el espejo]
https://browserstrangeness.github.io/css_hacks.html#webkit
La página de prueba también tiene muchas otras, específicamente basadas en versiones 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, consulte la página de prueba primero, pero proporcione el código de ejemplo y el truco que está intentando que alguien le ayude.