Ich habe mich in der letzten Zeit mal wieder intensiver mit Browsern und ihren Fähigkeiten auseinandergesetzt.
Die Themen HTML5, CSS3 und Erleichterungen beim Schreiben von CSS waren für mich dabei sehr zentrale Elemente.
Einerseits bin ich neulich über das Framework „perkins“ gestolpert, das mir kurz darauf extrem viel Arbeit extrem erleichtert hat.
Rapid Prototyping live an einer HTML-Seite. Dazu viele kleine Helfer und bereits vorhandene Beispiele. Wahnsinn.
Dann war da noch das Cicada-Prinzip und wie man im Web damit „organische“ Wiederholungen produzieren kann. Auch das ist direkt in ein Projekt geflossen, zusammen mit einer kleinen Seite basierend auf Perkins.
Der Rest des Cicada-Projektes basiert auf WordPress und einem modifizierten TwentyEleven-Theme, welches im Gegensatz zu TwentyTen ziemlich strikt auf HTML5 aufsetzt.
HTML5 funktioniert in allen Redmonder Browserversionen gleich gut. Lediglich das CSS3 Multiple Background-Dings mag so gar nicht und erfordert ein Conditional Stylesheet, da ein Fallback wie bei den Hintergrund-Verläufen nicht! funktioniert.
Apropos Conditional Comment: Ein CSS mit Conditional Comment in ein WordPress-Child-Theme einzubauen funktioniert, ohne die header.php überschreiben zu müssen:
#Add IE Stylesheet for background
add_action( 'wp_print_styles', 'add_ie_style');
function add_ie_style() {
wp_register_style( 'ie-style',
get_bloginfo( 'stylesheet_directory' ) .
'/ie.css', false, $theme['Version'] );
$GLOBALS['wp_styles']->add_data( 'ie-style',
'conditional', 'lte IE 9' );
wp_enqueue_style( 'ie-style' );
}; Selbsterklärend, oder? Allerdings will ich, wenn ich mit einem Child-Theme von z.B. TwentyEleven arbeite möglichst wenig Code überschreiben, um die zukünftige Arbeit bei Theme-Updates gering zu halten.
Responsive Layouts mit Bildern versehen ist schwieriger, als man denkt, solange background-size eher weniger als mehr von den unterschiedlichen Browsern supportet wird.
Und selbst dann gibt es Browser, in welchen clientseitig skalierte Bilder scheiße aussehen.