para - lista de codigos css

Usando comentarios condicionales de IE dentro de una hoja de estilo

Question

Sé que puedes usar un comentario condicional de IE dentro de HTML:

<!--[if IE]>
  <link href="ieOnlyStylesheet.css" />
<![endif]-->

Pero, ¿qué pasa si quiero apuntar solo a IE en una hoja de estilo , configurando una regla css para un elemento específico dentro del html? Por ejemplo, puedes usar este hack de Chrome / Safari dentro del archivo css como código css ...

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
}

Pero usando el hack de IE dentro de la hoja de estilo CSS de esta manera:

 <!--[if IE]>
      .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
 <![endif]-->

No funciona. ¿Qué uso dentro de una hoja de estilo para apuntar solo a IE?

Answer 1

Hacks de hojas de estilo IE

.Class {
   color:  green;     /* standard */
   color:  green/9;   /* IE 8 and below */
   *color: green;     /* IE 7 and below */
   color:  green !ie; /* IE 7 and below */
   _color: green;     /* IE 6 */
}

Answer 2

Lo que quieres hacer es diseñar todo en tu hoja de estilo como lo harías normalmente para cualquier otro navegador. DESPUÉS de importar la hoja de estilo normal a su página, importará una hoja de estilo específica de IE con la declaración condicional regular <!--[if IE]> .

Seguir este método importa los estilos para todos los navegadores y luego utiliza sus estilos específicos de IE para anular aquellos que no son compatibles, no se procesan correctamente o deben ajustarse para su uso en IE.

Answer 3

Los comentarios condicionales funcionan en Internet Explorer 9 y versiones anteriores, pero Internet Explorer 10 y versiones posteriores no hacen caso. Puede usar reglas CSS específicas de Internet Explorer en su hoja de estilos . Hacks? Sí, pero no realmente hacks sucios imho.

Para apuntar a Internet Explorer 8, 9, 10 y 11, puede usar:

@media screen / 0 {…}

Para apuntar a Internet Explorer 6 y 7, puede usar:

@media screen / 9 {…}

Fuente: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/

Funcionó para mí. No he tenido tiempo de probarlo en diferentes navegadores. Si puede confirmar que funciona (o no), agregue algunos comentarios (con el navegador en el que lo probó).

Ejemplo:

/* Default CSS rule for all browsers */

span.icon {
 width: 16px;
 display: inline-block;
 margin-right: -16px;
}

/* Style rules in the media rules below will only be applied in Internet Explorer */
/* Other browsers will ignore them. */  

@media screen/0, @media screen/9 { 
  span.icon {
    margin-right: 8px;
 } 
}

--- Nothing to see here. Only CSS rules ---

Un ejemplo completo:

span.icon {
 width: 16px;
 display: inline-block;
 margin-right: -16px;
}

/* Style rules in the media rules below will only be applied in Internet Explorer, other browsers will ignore them. */  

@media screen/0, @media screen/9 { 

 /* Style rules here will only be applied in Internet Explorer, other browsers will ignore them. */ 
 
 span.icon {
     margin-right: 8px;
 } 
}


/* -----------------------------------------------------------------------------*/

a.icon {
 -webkit-padding-start: 1.5em;
 text-decoration: none;
}

a.icon:hover {
 text-decoration: underline;
}

span.icon_file {
 background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
}

span.icon_dir {
 background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
}

span.icon_up {
 background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
 
}

.nowrap {
  white-space: nowrap ;
}

div.fileList {
 padding: 20px;
}

html, body {
    width: 100%;
    height: 100%;    
    margin: 0;
    padding: 0;
}

table.FileList {
    border-collapse: collapse;
    margin: 20px;
  }

  table.FileList th {
    text-align: left;
    font-weight: bold;
  }
  
  table.FileList td {
    border: 0px solid #000;
  }
  
table.FileList tr.heading{
    border-bottom: 1px solid black;
}

<table class="FileList">
        <tr class="heading"><th>Archive</th></tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2018">2018</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2017">2017</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2016">2016</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2015</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2014</a></span></td></tr>            
    </table>

Answer 4

Los comentarios condicionales no funcionan dentro de las hojas de estilo. En su lugar, puede usar comentarios condicionales en su HTML para aplicar diferentes clases de CSS o ID a elementos que luego puede segmentar con CSS.

Por ejemplo:

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->

Además, hay herramientas como Modernizr que realizan la detección de características de una manera muy similar (al agregar clases al elemento <html> ). Puede usarlo para mejorar progresivamente su diseño / secuencia de comandos para los navegadores más nuevos y al mismo tiempo es compatible con los navegadores más antiguos.

Answer 5

No puedes usar comentarios condicionales de IE pero puedes usar hacks. Esta página de hacks CSS explica los hacks de IE que puedes usar (y más).

Answer 6

Puede ser más fácil de lo que dijo Derek Hunziker:

Simplemente incluya este código tal como es:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>

Luego puede apuntarlo fácilmente, por ejemplo, si desea apuntar a IE 8 y más bajo, escriba:

.lt-ie9 body{css rule here;}

y ya has terminado!

Aclamaciones