web-dev-qa-db-fra.com

Utilisation de IE commentaires conditionnels dans une feuille de style

Je sais que vous pouvez utiliser un commentaire conditionnel IE dans HTML:

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

Mais que se passe-t-il si je souhaite cibler uniquement IE dans une feuille de style, en configurant une règle css pour un élément spécifique à l'intérieur du code html. Par exemple, vous pouvez utiliser ce Chrome/Safari hack à l'intérieur du fichier css en tant que code css ...

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

Mais en utilisant le hack IE à l'intérieur de la feuille de style CSS comme ceci:

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

ne marche pas. Qu'est-ce que j'utilise à l'intérieur d'une feuille de style pour cibler IE uniquement?

cssconditional-comments
30
Dexter Schneider

Les commentaires conditionnels ne fonctionnent pas dans les feuilles de style. Au lieu de cela, vous pouvez utiliser des commentaires conditionnels dans votre code HTML pour appliquer différentes classes CSS ou ID à des éléments que vous pouvez ensuite cibler avec CSS.

Par exemple:

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

De plus, il existe des outils tels que Modernizr qui font la détection des fonctionnalités de manière très similaire (en ajoutant des classes à <html> élément). Vous pouvez l'utiliser pour améliorer progressivement votre conception/script pour les nouveaux navigateurs tout en prenant en charge les anciens navigateurs.

23
Derek Hunziker

Cela peut être plus facile que ce que Derek Hunziker a dit:

Incluez simplement ce code tel qu'il est:

<!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>

Ensuite, vous pouvez le cibler facilement, par exemple si vous souhaitez cibler IE 8 et plus bas, vous écrivez:

.lt-ie9 body{css rule here;}

et vous avez terminé!

À votre santé

18
Yannis Dran

Les commentaires conditionnels fonctionnent dans Internet Explorer 9 et versions antérieures, mais sont ignorés par Internet Explorer 10 et versions ultérieures. Vous pouvez utiliser des règles CSS spécifiques à Internet Explorer dans votre feuille de style . Hacks? Ouais, mais pas vraiment des hacks à mon humble avis.

Pour cibler Internet Explorer 8, 9, 10 et 11, vous pouvez utiliser:

@ écran média\0 {…}

Pour cibler Internet Explorer 6 et 7, vous pouvez utiliser:

@ écran média\9 {…}

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

Ça a marché pour moi. Je n'ai pas eu le temps de le tester dans différents navigateurs. Si vous pouvez confirmer que cela fonctionne (ou non), veuillez ajouter quelques commentaires (avec le navigateur dans lequel vous l'avez testé.)

Exemple:

/* 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 exemple complet:

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>
6
RWC

Vous ne pouvez pas utiliser IE commentaires conditionnels mais vous pouvez utiliser des hacks. Cette page de hacks CSS explique IE hacks que vous pouvez utiliser (et plus).

4
John Conde

Piratage de feuilles de style 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 */
}
1
pcunite

Ce que vous voulez faire, c'est tout styliser dans votre feuille de style comme vous le feriez normalement pour tout autre navigateur. APRÈS avoir importé la feuille de style normale dans votre page, vous importerez ensuite une feuille de style spécifique à IE avec l'instruction conditionnelle régulière <!--[if IE]>.

Suivre cette méthode importe les styles pour tous les navigateurs, puis utilise vos styles spécifiques à IE pour remplacer ceux qui ne sont pas compatibles, ne s'affichent pas correctement ou doivent être ajustés pour être utilisés dans IE.

0
Zachary Kniebel