css3 - paginas - link rel= stylesheet para que sirve
¿Cómo apuntar solo a IE(cualquier versión) dentro de una hoja de estilo? (5)
Aquí hay una colección de consultas de medios que le permitirán hacer eso para cualquier versión de Internet Explorer (desde IE6 a IE11 +), Firefox, Chrome y Safari (EDITAR: también se agregó Opera).
IE 6
* html .ie6 { property: value; }
o
.ie6 { _property: value; }
IE 7
*+html .ie7 { property: value; }
o
*:first-child+html .ie7 { property: value; }
IE 6 y 7
@media screen/9 {
.ie67 {
property: value;
}
}
o
.ie67 { *property: value; }
o
.ie67 { #property: value; }
IE 6, 7 y 8
@media /0screen/,screen/9 {
.ie678 {
property: value;
}
}
IE 8
html>/**/body .ie8 { property: value; }
o
@media /0screen {
.ie8 {
property: value;
}
}
Modo de estándares IE 8
.ie8 { property /*/**/: value/9 }
IE 8,9 y 10
@media screen/0 {
.ie8910 {
property: value;
}
}
Solo IE 9
@media screen and (min-width:0/0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{
property: value;
}
}
IE 9 y superior
@media screen and (min-width:0/0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up {
property: value;
}
}
IE 9 y 10
@media screen and (min-width:0/0) {
.ie910 {
property: value/9;
} /* backslash-9 removes ie11+ & old Safari 4 */
}
Solo IE 10
_:-ms-lang(x), .ie10 { property: value/9; }
IE 10 y superior
_:-ms-lang(x), .ie10up { property: value; }
o
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up {
property:value;
}
}
IE 11 (y superior ..)
_:-ms-fullscreen, :root .ie11up { property: value; }
Firefox (cualquier versión)
@-moz-document url-prefix() {
.ff {
color: red;
}
}
Firefox (solo Quantum / Stylo)
@-moz-document url-prefix() {
@supports (animation: calc(0s)) {
/* Stylo */
.ffStylo {
property: value;
}
}
}
Firefox Legacy (pre-Stylo)
@-moz-document url-prefix() {
@supports not (animation: calc(0s)) {
/* Gecko */
.ffGecko {
property: value;
}
}
}
Webkit (Chrome y Safari, cualquier versión)
@media screen and (-webkit-min-device-pixel-ratio:0) {
property: value;
}
Google Chrome (29+)
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.chrome {
property: value;
}
}
Safari (7.1+)
_::-webkit-full-page-media, _:future, :root .safari_only {
property: value;
}
Safari (de 6.1 a 10.0)
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
@media {
.safari6 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
Safari (10.1+)
@media not all and (min-resolution:.001dpcm) {
@media {
.safari10 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
Opera (12+)
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .selector {
.opera12 {
color:#0000FF;
background-color:#CCCCCC;
}
}
}
Opera (11 y menor)
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
.opera11 {
color:#0000FF;
background-color:#CCCCCC;
}
}
Para obtener más información o consultas de medios adicionales, visite el sitio web browserhacks.com y / o consulte esta publicación de blog que escribí sobre este tema.
Tengo un proyecto heredado y hay lugares donde es un completo desastre. Este es uno de ellos. Necesito apuntar solo a IE (cualquier versión).
#nav li {
float: left;
height: 54px;
background: #4f5151;
display: table;
border-left: 1px solid grey;
}
Para ser claros: dentro de la hoja de estilo incrustada y sin agregar ID o clases a las etiquetas en el html, necesito aplicar el estilo de borde solo si el usuario está usando IE. ¿Cómo puedo hacer esto?
Editar: encontré una solución para Firefox, pregunta de edición para reflejar esto.
Cuando uso
SASS
, uso las siguientes
@media queries
2
@media queries
para apuntar a IE 6-10 y EDGE.
@media screen/9
@import ie_styles
@media screen/0
@import ie_styles
http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
Editar
También apunto a versiones posteriores de EDGE usando
@support queries
(agregue todas las que necesite)
@supports (-ms-ime-align:auto)
@import ie_styles
@supports (-ms-accelerator:auto)
@import ie_styles
https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
Después de experimentar problemas con los sitios que se rompen en Edge cuando usa el Modo de alto contraste, me encontré con el siguiente trabajo de Jeff Clayton:
https://browserstrangeness.github.io/css_hacks.html
Es una consulta de medios extraña y extraña, pero son más fáciles de usar en Sass:
@media screen and (min-width:0/0) and (min-resolution:+72dpi), /0screen/,screen/9 {
.selector { rule: value };
}
Esto se dirige a las versiones de IE que se esperan para IE8.
O puedes usar:
@media screen/0 {
.selector { rule: value };
}
Que apunta a IE8-11, pero también activa FireFox 1.x (que para mi caso de uso, no importa).
En este momento estoy probando con soporte de impresión, y esto parece estar funcionando bien:
@media all/0 {
.selector { rule: value };
}
Otra solución de trabajo para el estilo específico de IE es
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
Y luego tu selector
html[data-useragent*=''MSIE 10.0''] body .my-class{
margin-left: -0.4em;
}
Internet Explorer 9 y versiones anteriores : puede usar comentarios condicionales para cargar una hoja de estilo específica de IE para cualquier versión (o combinación de versiones) a la que desee apuntar específicamente, como a continuación, usando una hoja de estilo externa.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Sin embargo, a partir de la versión 10, los comentarios condicionales ya no son compatibles con IE.
Internet Explorer 10 y 11: cree una consulta de medios usando -ms-high-contrast, en la que coloca sus estilos CSS específicos de IE 10 y 11. Como -ms-high-contrast es específico de Microsoft (y solo está disponible en IE 10+), solo se analizará en Internet Explorer 10 y versiones posteriores.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Microsoft Edge 12: puede usar la regla @supports Aquí hay un enlace con toda la información sobre esta regla
@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
Detección de la regla IE8 en línea
Tengo 1 opción más, pero solo es detectar IE8 y la versión inferior.
/* For IE css hack */
margin-top: 10px/9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
Como especificó para la hoja de estilo incrustada. Creo que debe usar la consulta de medios y el comentario de condición para la versión siguiente.