tipos sirve que para paginas link hojas etiquetas estilos estilo enlazar ejemplos codigos css3

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.