#conditional comments

Another year has come and gone, and although after the events of last year it seemed like the earth was about to spin off its axis, we’re still here and email is as strong as ever. It’s time, once again, for our annual look back at the best and worst of of email in 2017. There are a few old favorites and a few surprises. We’ll start with that old chestnut that never seems to go away: The Bad Mail…

What is the Definition of a “CSS Hack”?

Should you’ve been writing CSS for no less than a couple of years, you then’ve most definitely used a CSS hack. However in the event you’re comparatively new to CSS, it’s attainable you’ve heard the time period however aren’t positive precisely what it means.

On this submit, I’m going to elucidate what precisely the time period CSS hackmeans and the way a CSS hack is used. However first, some…

Internet Explorer 8 comes with two different rendering engines. "Standards Mode" (they use the term loosely) and "Compatibility Mode". I'm not going to debate the reasoning behind their choice to ship the browser in this form, smarter people than I have already beaten that horse to death. The problem I have with it is that by default IE ships with a setting that makes anything on your LAN show up in compatibility mode. The button to switch to standards mode isn't displayed, and worst of all, there is nothing that tells you it is IN compatibility mode. I recently discovered this when, after carefully testing a site in Internet Explorers 6, 7 and 8, I committed the release to the SVN repo and published it to the staging server. A quick test showed IE8 issues that weren't there on my local version. Turns out the problem was this default compatibility mode setting. You can turn it off by going to "Tools > Compatibility View Settings" and unchecking the "Display intranet sites in Compatibility View" option. They did this to ensure old intranets are compatible with IE8 out the box, but in the process put every web designer in the awkward position of not knowing their site is broken until they upload. Internet Explorer 8 isn't all that bad. It does a pretty good job of fixing the (not so) little things that drove us crazy in previous incarnations, but it's far from perfect. In the very likely event that you need to code some IE8 specific styles I recommend using conditional comments. In this case I needed one set of modifications for IE6, 7 and compatibility mode 8 (which mostly behaves like IE7) and another for IE8 specifically. To achieve this I used the following code:

<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="css/ie.css" /><![endif]--> <!--[if IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css" /><![endif]-->

Als Webdesigner zu Arbeiten ist richtig toll. Man hat die möglichkeit sich so richtig kreativ auszutoben. Man hat heutzutage von HTML5 und CSS3 die möglichkeiten den wunderschönsten technischen Schnick Schnack einzubauen und eine richtig geile Seite aufzubauen..... währe da nicht ein kleines Problem:

Deine Seiten können noch so toll aussehen oder das beste Interface haben, wenn sie nicht im IE funktionieren sind sie für eine Firma wertlos.

Gottseidank weis das IE Team das ihr Browser nicht immer klar kommt, deshalb haben sie uns Webentwickler ein tolles Feature gegeben:

Conditional Comments.

Die handhabung ist eigentlich relativ simple:

Einfach ein Komentar im HTML schreiben der wie folgt aussieht:

<!--[if IE]> Hier sden IE spezifischen Code eintragen <![endif]-->

Schon wird der IE angewiesen diesen Code mit auszuführen. Dies klappt mit allen IE Versionen ab Version 5.

Es gibt aber auch noch eine andere Schreibweise, die es erlaubt Code für eine spezielle IE Version auszuführen:

<!--[if IE 6]> Hier den IE spezifischen Code eintragen <![endif]-->

oder aber auch diesen, der alle Versionen des IE's anspricht die unter Version 6 sind

<!--[if IE lt 6]> Hier den IE spezifischen Code eintragen <![endif]-->

oder auch diesen der alle IE Versionen unter Version 6 einschließlich Version 6 auswählt

<!--[if IE lte 6]> Hier den IE spezifischen Code eintragen <![endif]-->

Schon hat man eine einfache Möglichkeit das Stylesheet für den IE anzupassen.

Dabei kann man sich einige Trivias über den IE zu eigen machen:

Es gibt 2 Modi im IE: Der quirks modus und den normalen Modus. 

Beim Quirks Modus hat der IE ein gestörtes Boxen Modell, paddings erweitern die Box nicht und Margins kollabieren nicht.

margin: 0 auto; zentriert den Container nicht, abhilfe schafft text-align: center im Parent Container

Images, insbesondere PNGs mit einem separaten Alpha Kanal sind nicht transparent. Abhilfe: Pallette der Bilder auf 255 Farben Reduzieren und als GIF konvertieren.

Text-Shadow ist nicht vorhanden. Abhilfe:  filter:DropShadow(color=#000000, offx=1, offy=1); Ist nicht das Ware, aber wenigstens hat man nen rudimentären Schatten

Der Border wird nicht auserhalb des Containers gezeichnet, sondern Innerhalb. Resultat: Der Border bildet einen zusätzlichen Padding. 

Use this conditional comment if you need to target ie Mobile in Windows Phone 7.