Conditional Tags1

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->

<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->

<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->

<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->

<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->

<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->

<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->

<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->

<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->

<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

Input Pseudo Elemente (IE10+)2

/* Applies styles to the browse button of an input type=file */
::-ms-browse

/* Applies styles to the check of a checkbox or radio button input */
::-ms-check

/* Applies styles to the clear button of a text input */
::-ms-clear

/* Applies styles to the drop-down button of a select */
::-ms-expand

/* Applies styles to the progress control.
 * All styles are applied to the bar portion of the 
 * determinate progress bar, except for the 
 * animation-name style property, which controls the 
 * animation of the indeterminate progress control.
*/
::-ms-fill

/* Applies styles to portion of the track of a input type=range.
 * The styles are applied to the control's track from its 
 * smallest value up to the value currently selected by the 
 * thumb. In a left-to-right layout, this is the portion of the 
 * track to the left of the thumb.
*/
::-ms-fill-lower

/* Applies styles to portion of the track of a input type=range.
 * The styles are applied to the control's track from the value 
 * currently selected by the thumb up to the slider's largest 
 * value. In a left-to-right layout, this is the portion of the 
 * track to the right of the thumb.
*/
::-ms-fill-upper

/* Applies styles to the password reveal button of an input type=password */
::-ms-reveal

/* Applies styles to portion of the input type=range control that the user drags */
::-ms-thumb

/* Applies styles to the tick marks after the slider track of an 
 * input type=range. In a left-to-right layout, these are the 
 * ticks below the track. In a top-to-bottom layout, these are 
 * the ticks to the right of a track.
*/
::-ms-ticks-after

/* Applies styles to the tick marks before the slider track of 
 * an input type=range. In a left-to-right layout, these are 
 * the ticks above the track. In a top-to-bottom layout, these 
 * are the ticks to the left of a track.
*/
::-ms-ticks-before

/* Applies styles to the tooltip of an input type=range). Note
 * that only display and visibility style properties are applicable.
*/
::-ms-tooltip

/* Applies styles to the track of an input type=range */
::-ms-track

/* Applies styles to the content of a text or password input control, or a select control */
::-ms-value

CSS3 Polyfill

Mit dem CSS3Pie-Polyfill3 für Internet Explorer lässt sich ein Grossteil der CSS3 Effekte auch auf IE8 realisieren.

  • border-radius
  • box-shadow
  • border-image
  • CSS3 Backgrounds
  • Verläufe
  • RGBA

Verläufe

Verläufe entfernen im IE9 allfällige abgerundete Ecken!
Filter “deaktivieren” unter Umständen (IE8 und älter) ClearType (Schrift Antialiasing)!

Die Option “GradientType” legt fest ob der Verlauf horizontal (1) oder vertikal (0) sein soll.

/* IE 6 y 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0');

/* IE 8 y 9 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2F2727', endColorstr='#1a82f7', gradientType='0')";

/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);

Schatten

Es gibt zwei Arten von IE-Schatten-Filtern. Shadow4 erzeugt einen einfachen Schatten für den nur grösse und Richtung angegeben werden kann. DropShadow5 lässte genauere Abstands- und Richtungswerte zu, besitzt aber keine weichen Kanten. ACHTUNG: DropShadow wird zur Elementgrösse hinzugerechnet!

// Shadow
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

// DropShadow
filter: progid:DXImageTransform.Microsoft.DropShadow(color='#FF336699', positive='false', offX=-2, offY=2);

Transparente Hintergrundfarbe6

Diese Methode entfernen im IE9 allfällige abgerundete Ecken!
Filter “deaktivieren” unter Umständen (IE8 und älter) ClearType (Schrift Antialiasing)!
// simulare rgba in ie8 and earlier
.color-block { 
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); 
  zoom: 1;
}

Die Transparenz wird beim 8-stelligen HEX-Farbcode über die ersten zwei Ziffern definiert. 00 entspricht transparent, ff decken.

Fehlende position:absolute Elemente

Unter gewissen Bedingungen lässt IE8 einige absolut positionierte Elemente verschwinden. Diesem Problem kann mit einer definierten Breite entgegen gewirkt werden.

Pseudo Elemente

Bei der Verwendung von em-basierten Schriftgrössen in ::before Elementen, ist IE bis und mit Version 11 nicht in der lage den ursprünglichen Wert durch spätere Definitionen wieder zu überschreiben. Eine alternative Einheit verwenden.

  1. http://www.quirksmode.org/css/condcom.html []
  2. http://msdn.microsoft.com/en-us/library/windows/apps/hh767361.aspx []
  3. http://css3pie.com []
  4. http://msdn.microsoft.com/en-us/library/ms533086%28v=vs.85%29.aspx []
  5. http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx []
  6. http://css-tricks.com/rgba-browser-support/ []

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.