CSS & XHTML
Mittwoch30. April 2008

Dieser Beitrag ist meinem Freund und Kollegen Ansgar  gewidmet.

#1 @charset

Über die @charset Regel kann optional die Kodierung einer CSS-Datei angegeben werden. Zur Auswahl stehen hier zahlreiche ISO-Kodierungen (z.B. ISO-8859-1), wie auch Unicode-Kodierungen (z.B. UTF-8). Bei der Anwendung gibt es jedoch zwei wichtige Regeln zu beachten:

  1. @charset muss immer in der ersten Zeile eines Stylesheets stehen, andernfalls ignorieren Browser wie der Safari den kompletten Inhalt der Datei.
  2. Es darf immer nur eine @charset Regel in einer Datei stehen. Andernfalls ignorieren einige Browser alle CSS-Regeln ab dem zweiten Auftreten von @charset.

Der zweite Punkt ist besonders wichtig, wenn verschiedene Stylesheets optimiert und zu einer Datei zusammengefasst werden sollen. Die wenigsten CSS-Optimierer beachten die @charset Regel, wodurch diese plötzlich mehrfach vorkommt der Browser das Stylesheet ignoriert.

#2 @import

Über die @import Regel lassen sich externe Stylesheets in ein anderes Stylesheet. Auf diese Weise lassen sich CSS-Deklaration sauber nach Funktionen in verschiedene Dateien zerlegen und unabhängig pflegen. Auch bei der Verwendung von @import gibt es einige Punkte zu beachten.

  1. @import muss immer vor allen anderen Regeln stehen (ausgenommen @charset). Der Aufruf mehrerer @import-Regeln hintereinander ist möglich.
  2. Innerhalb einer @media-Regel ist @import nicht zulässig. Das wäre eine Verletzung von Regel 1, weshalb Firefox, Safari, Opera und alle anderen modernen Browser die @import-Regel in diesem Fall ignorieren.
  3. So verlockend die optionale Angabe des Ausgabemediums auch ist (z.B. @import (mein.css) screen,projection), der IE6 kommt mit den Ausgabemedien nicht klar und ignoriert das externe Stylesheet. Schade eigentlich, aber solange der IE6 in signifikanter Größenordnung genutzt wird, ist diese Option so gut wie unbrauchbar.

Speziell Punkt 3 hat mich vor wenigen Tagen wieder zur Verzweiflung getrieben. Manchmal denke ich, das Internet käme schneller voran, wenn Microsoft den IE8 einstampfen würde und stattdessen damit beginnen würde, das Verständnis für CSS2(.1) des IE6 auf ein annehmbares Niveau zu patchen. Denn dieser Browser klebt der Welt wie Sch**** am Schuh und will einfach nicht verschwinden und so wie Vista nicht XP verdrängt, wird es der IE8 vermutlich auch den IE6+7 nicht endgültig zur Strecke bringen.

#3 @media

Zum Abschluss noch ein paar Worte zur @media Regel, über welche der Wirkungsbereich von CSS-Deklarationen auf vordefinierte Medientypen beschränkt werden kann.

  1. Einer der häufigsten Fehler in der Anwendung dieser Regel ist, dass die schließende geschweifte Klammer vergessen wird, denn die CSS-Eigenschaften jedes Selektors werden ebenso in geschweiften Klammern zusammengefasst. Im ungünstigsten Fall ignorieren Browser wie der Firefox daraufhin den kompletten Inhalt der Regel.
  2. Vertrauen Sie nicht dem Medientyp handheld. Zwar wurde es speziell für mobile Geräte in den Standard CSS Mobile Profile 1.0 aufgenommen, doch bis heute wird er von kaum einem Gerät unterstützt. Auch für die Ausgabe auf Mobilgeräten kommt in der Regel der Medientyp screen zum Einsatz. 

Das war’s. Ich mach dann mal Feierabend.


Donnerstag27. März 2008

Das Entwicklerteam des Opera-Browsers ist ausgesprochen aktiv und immer um die Weiterentwicklung ihres Browsers bemüht. Erst gestern meldete das Opera Desktop Team 100 von 100 möglichen Punkten im ACID 3 Test des Webstandards Projects (im Wettrennen mit Safaris Webkit-Engine) und darf sich nun feiern und auf die Schulter klopfen lassen.

Sehr schön, wirklich. Allerdings kontrolliert der ACID3-Test offensichtlich nicht Ergebnisse grundlegender Rechenoperationen, die jeder Browser beherrschen sollte (sowas wird allgemein nach der Grundschule vorausgesetzt). Und so passiert es, dass der Opera seit Jahren nicht dazu fähig ist, Prozentangaben als reelle Zahlen zu verarbeiten. Stattdessen schneidet er beständig auch in der neuesten Beta-Version Nachkommastellen einfach weg und behandelt Breiten- und Höhenangaben in Prozent als Integerwerte.

Das W3C legt in der CSS2 Spezifikation in Abschnitt 4.3.3 fest:

The format of a percentage value (denoted by <percentage> in this specification) is an optional sign character (’+’ or ‘-’, with ‘+’ being the default) immediately followed by a <number> immediately followed by ‘%’.

Die Definition für <number> findet sich in Abschnitt 4.3.1, die wichtigen Passagen sind markiert:

Some value types may have integer values (denoted by <integer> ) or real number values (denoted by <number>). Real numbers and integers are specified in decimal notation only. An <integer> consists of one or more digits “0” to “9”. A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits. Both integers and real numbers may be preceded by a “-” or “+” to indicate the sign.

Die Auswirkungen dieses Bugs bekommt man bei der Positionierung von Containern mit flexiblen Spaltenbreiten oder -höhen, sowie bei der Skalierung von Schriftgrößen (man denke an krumme Werte infolge Vererbung) zu spüren, denn wo selbst der IE5 (FF und Safari natürlich ebenso) bei der Rechnung 66.666% + 33.333% = 99.999% (bei Layoutbreiten unter 100.000 Pixeln also effektiv 100 Prozent) errechnen, landet Opera bei 99 Prozent denn er macht daraus 66%+33%. Aus dieser Eigenart ergeben sich dann plötzlich Abstände und Zwischenräume im Layout wo keine sein dürften. Für Webdesigner entstehen hingegen Fragezeichen über dem Kopf und unnötiger Anpassungsaufwand, denn patchen lässt sich dieser Bug leider nicht.

Also liebe Opera-Entwickler: Wenn Ihr mit dem Feiern fertig seid wäre es wirklich ein Segen, wenn ihr Euch dieses Problems endlich mal annehmen könntet. Ich war auch diesmal so freundlich, einen Testcase zu bauen, extra für Euch.

Auf der anderen Seite zeigt sich für mich mal wieder, dass auch die ACID-Tests (mittlerweile in der 3. Generation) für den Alltag nicht die Praxisnähe haben, die man sich eigentlich wünschen würde, um die Rendering-Qualität von Browsern korrekt einschätzen und vergleichen zu können.

Update 16.6.2012: Vor wenigen Tagen ist Opera 12 erschienen. Und mit dieser Version ist dieser “ewige” Bug nun endlich beseitigt. Vielen Dank.

 


Donnerstag20. März 2008

Ein Blick zurück

Grid-Layouts sind der letzte Schrei - hört man jedenfalls überall. Nach den zähen Jahren des Erlernens von CSS trauen wir Webentwickler uns wieder an eine Gestaltungsvariante für Webseiten, die bereits vor 10 Jahren eine Blütezeit erlebt hatte. Damals nämlich als man mit Tabellen und transparenten GIFs so ziemlich alles crossbrowser (IE 4,5 & Netscape 4) hinbekommen hat.

Schließlich haben die Grid-Layouts - wie irgendwie fast alles im Netz - ihren Ursprung im Printdesign. Mit dem Aufkommen von CSS 2 und der Verbannung der Layouttabellen waren jedoch plötzlich selbst einfache 2 und 3-Spaltenlayouts anspruchsvoll genug, um Layoutentwickler aufgrund zahlloser Bugs ins Schwitzen zu bringen. Die Technik zu beherrschen war eine Kunst (zuweilen auch Voodoo) und demzufolge wurden Layouts geradliniger, einfacher ... Spaltenlayouts halt.

Grids mit Blueprint

Seit einiger Zeit jedoch gibt es sie wieder, die Grid-Layouts. Dieses Mal sind sie CSS-getrieben und mit Hilfe von CSS Frameworks wie Blueprint CSS soll auch die Erstellung einfacher von der Hand gehen.

 

Den gesamten Beitrag lesen


Freitag01. Februar 2008

Ein halbes Jahr nach dem ersten Preview Release des YAML Builders ist es es Zeit für die Version 1.0 dieses kleinen aber feinen Zusatztools zum YAML Framework. In dieser Version habe ich den Großteil der Features einbauen könnnen, die mir bereits letzten August am Herz lagen, damals jedoch aufgrund des Zeitmangels und der Arbeit an der 2. Auflage meines Buches “CSS Layouts” nicht integriert werden konnten.

Den gesamten Beitrag lesen


Samstag20. Oktober 2007

Aufgrund der späten Stunde hier nur die wichigsten Fakten. Das neueste Firefox Update auf Version 2.0.0.8 bringt einen äußerst hässlichen Bug mit. Auslöser sind floatende Boxen mit negativem seitlichen Außenabständen (Margins). Diese Boxen werden weder in einem ebenfalls floatenden Elterncontainer eingeschlossen (containing floats), noch funktioniert das normale Beenden der Fließumgebung (clearing floats) über ein nachfolgendes Element mit der Eigenschaft clear:both. Ein Versuch mit overflow:hidden (sollte floatende Container ebenfalls einschließen) schlägt übrigens auch fehl. In diesem Fall werden die sonst überstehenden Bereiche einfach abgeschnitten.

Ein entsprechender Testcase steht bereit und ein Ticket bei Bugzilla ist geschrieben. Ich hoffe, die Entwickler sorgen schnellstmöglich für eine Korrektur, denn diese Technik ist bei aktuellen CSS-Layouts sehr verbreitet.

Ach ja, einen Workaround gibt es: Das Clearing mit der Clearfix-Methode funktioniert, ist aber mit Sicherheit keine Dauerlösung.

UPDATE: Es sieht danach aus, als könnte sich das Problem innerhalb der nächsten Woche wieder erledigt haben. Offensichtlich gab es noch weitere “Kollateralschäden”, sodass vermutlich Ende nächster Woche bereits der Firefox 2.0.0.9 das Licht der Welt erblicken wird. Und der Float-Clearing-Bug wird in diesem Update gefixt sein.

UPDATE 2 (31.10.07): Habe eben den RC des Firefox 2.0.0.9 installiert und getestet. Der Bug ist definitiv gefixt und - was YAML betrifft - scheint es auch keine neuen Probleme zu geben.


Seite 7 von 9 Seiten

« Erste  <  5 6 7 8 9 >