compilatori CSS e conversione hack IE CSS condizionale [chiusa]

StackOverflow https://stackoverflow.com/questions/2746754

Domanda

Vai al fondo per la domanda, ma in primo luogo, un po 'di contesto.

Così ho cercato in compilatori CSS (come Sass & meno) per un po ', e sono stati davvero interessati a loro, non perché mi aiutano a capire qualcosa di più facile (ho fatto css per un paio d'anni a questa parte ) ma piuttosto ridurre il cruft e mi aiuta a vedere le cose più facili.

Recentemente ho cercato in attuazione affidabile inline-block (e clearfix), che richiedono un sacco di codice estraneo e hack. Ora, secondo tutte le autorità nel campo, non dovrei mettere hack IE nella stessa pagina faccio il mio CSS, dovrei farli condizionale. Ma per me questo è davvero un grande fastidio di passare attraverso e gestire tutto questo codice aggiuntivo, che è il motivo per cui mi piace molto le cose come meno. Invece di applicare classi unsemantic, si specifica un mixin e applicare una volta, ed è tutto pronto.

Quindi credo che ho avuto un po 'di pista (ho voluto spiegare i miei punti), ma bascially, io sono al punto in cui questi compilatori CSS sono molto utili per me, e mi permetto di molto astratta del cruft applicarle via, e in modo affidabile una volta e poi basta compilarlo. Mi piacerebbe avere un modo per essere in grado di compilare stili specifici di IE nelle proprie file condizionali (ala Meno / Sass) in modo da non avere a che fare con la gestione di 2 file per nessun motivo.

fa qualcosa di simile uno script / applcation che corre e può fare di sottolineatura / stella hack a parte del proprio file esiste?

È stato utile?

Soluzione

Non è proprio un trucco del compilatore, ma se si desidera utilizzare i commenti condizionali, senza dover compilare i fogli di stile per-browser separate, si può semplicemente utilizzare HTML commenti condizionali per iniettare un gancio styling. Ad esempio: 

    ...
</head>
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->

Ora è possibile indirizzare le regole da applicare a IE <= 6 e IE <= 7 nello stesso foglio di stile come il resto delle regole: 

body.ie6 #thing { position: relative; }
body.ie7 #otherthing { z-index: 0; }

Questa è IMO marginalmente più pulita rispetto l'hack * html, che è l'ultimo trucco CSS accettabile. (Il “trucco stella” e “underscore hack” non sono validi CSS: evitare.)

Altri suggerimenti

Si può solo condizionalmente includere un foglio CSS generato per IE6 / 7 / whathaveyou: 

<head>
    <link rel="stylesheet" href="/css/master.css" type="text/css"/>
    <!--[if IE 6]>
      <link rel="stylesheet" href="/css/ie6.css" type="text/css"/>
    <![endif]-->
</head>

Inoltre, se siete preoccupati per la miscelazione in IE correzioni / hack con la maggior parte del vostro SASS / CSS, è possibile li spezzare nelle proprie parziali: 

@import ie6.sass

È possibile che questo dovrebbe includere tutte le regole per quella particolare versione di IE nel documento SASS corrente. La documentazione sul parziali può essere trovato qui: SASS partial

  

Questa è IMO marginalmente più pulita la * html hack, che è l'ultimo trucco CSS accettabile. (Il “trucco stella” e “underscore hack” non sono validi CSS: evitare.)

Non proprio: mentre la "sottolineatura mod" non è valido, gli hack "* html" e "* + HTML" sono perfettamente valido CSS. controllare voi stessi . ;)

~

Per quanto riguarda la domanda di cui sopra, per ora non sono a conoscenza di qualsiasi compilatore in grado di farlo, io ancora preferisco all'utente l'hack di partenza (IE6-7) e tenere tutto in un unico file. Più gestibile.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top