Kategorie: HTML5 & CSS3

Farbe von markiertem Text mit CSS anpassen

In allen Browsern ist die standarmäßige Darstellung von markiertem Text auf weiße Schrift und blauen Hintergrund gesetzt. In letzter Zeit sehe ich jedoch immer mehr Webseiten, die sich davon abwenden. Einerseits um markierte Textstellen besser lesbar zu machen, andererseits um das Design noch einheitlicher zu gestalten.

Farbige Textmarkierungen können mit Hilfe von CSS realisiert werden. Dabei lassen sich die Text- und Hintergrundfarbe von markiertem Text ändern. Unterstützt wird der „selection“-Selektor von Opera ab Version 9.5, vom Internet Explorer ab Version 9, von Chrome und Safari. Firefox kann seit Version 3.6 ebenfalls damit umgehen.

::selection {background: #ff0000; color: #ffffff;}
::-moz-selection {background: #ff0000; color: #ffffff;}

Ursprünglich war der neue Selektor Teil der CSS3-Spezifikation. Mittlerweile wurde der Support eingestellt und der Selektor ist in der neuesten Spezifikation leider nicht mehr vorhanden. Durch die breite Unterstützung auf Browserbasis bleibt der „selection“-Selektor aber weiterhin interessant. Einziger Nachteil beim Einsatz ist, dass dieser Selektor nicht valide ist.

Ich habe euch eine Demo mit drei verschiedenen Beispielen erstellt. Dort könnt ihr selbst testen und den Quellcode kopieren:
https://www.antary.de/wp-content/uploads/2011/11/css_selection.html

 

Kategorien: HTML5 & CSS3 Web-Design

Firefox erreicht 100 Punkte im Acid3 Test

Obwohl der Acid3-Test bereits im Februar 2008 veröffentlicht wurde, haben die Firefox Versionen 4 bis 7 den Test bisher nur mit 97 von 100 Punkten bestanden. Seit einem Update des Acid3-Tests vor einigen Tagen kommt Firefox aber auf die volle Punktzahl.

Als Hintergrundinformation sollte man wissen, dass der Acid3-Test nur stichprobenartig bestimmte Webstandards prüft. Darunter befinden sich auch die drei, bisher fehlenden Punkte. Diese beziehen sich auf die Unterstützng von SVG-Fonts. In der Realität hat sich mittlerweile aber WOFF (Web Open Font Format) durchgesetzt, weswegen SVG-Fonts nie genutzt wurden. Selbst andere Browser, die in der Vergangenheit 100 Punkte erreichten, haben SVG-Fonts fehlerhaft implementiert, um auf die werbewirksame Zahl von 100 Punkten zu kommen. Firefox zog jedoch nicht mit und blieb bis vor Kurzem eben bei 97 Punkten stehen.

Schöne Buttons mit CSS3 erstellen

Im Rahmen eines kleinen Webprojekts für mein Studium, habe ich heute ein HTML-Formular erstellt. Da ich unbedingt schöne Buttons wollte, habe ich mich das erste Mal richtig mit CSS3 auseinandergesetzt. Wirklich toll was damit alles möglich ist.

Ich habe mir einen Button mit abgerundeten Ecken, leichtem Farbverlauf und Schatten gebastelt. Der Text hat ebenfalls einen leichten Schattenwurf bekommen und beim drüberfahren wird die Farbe der Buttons gewechselt, mit Animation natürlich. Anzumerken wäre noch, dass alles rein in CSS realisiert wurde und keine Grafiken zum Einsatz kommen. Auch am HTML-Code muss nichts geändert werden. Die Buttons funktionieren im Firefox 4, Opera 11.11 und Chrome 12 einwandfrei. Im IE9 muss man lediglich auf die Animation beim Hovern verzichten.

Hier das Ergebnis. Links im normalen Zustand, rechts wenn man mit der Maus drüberfährt:

(mehr …)

Präsentation über CSS3

Gerade bin ich über eine sehr tolle Präsentation zum Thema CSS3 gestolpert.Folgende Themen werden auf insgesamt 103 Seiten behandelt:

  • Everything you ever wanted to know about CSS3 selectors
  • Transparency and new color formats, including RGBA
  • New ways to work with backgrounds, including CSS gradients, multiple background images and natively supported CSS sprites
  • Rounded corners and border images
  • Box and text shadows
  • Transforms, transitions and their potential downsides
  • New values, including calc(), attr() and new units
  • Browser support information and techniques to take advantage of the exciting new stuff with respect to browsers of the past, to create experiences that are enjoyable for everyone

Die Präsentation wurde von Lea Verou erstellt und sollte unbedingt mit der Betaversion von Firefox 4 angeschaut werden. Falls dies nicht möglich ist, kann man auf die Online-Version zurückgreifen.

Kategorien: HTML5 & CSS3 Web-Design

Browser auf HTML5-Kompatibilität testen

Unter html5test.com hat Niels Leenheer einen Test veröffentlich, um Browser auf ihre HTML5-Unterstützung hin zu testen. Ähnlich wie beim Acid3-Test werden Punkte vergeben, um die unterschiedlichen Browser besser vergleichen zu können. Das Ergebnis wird übersichtlich zusammengefasst und zeigt genau auf, welche HTML5-Funktionen bereits unterstützt werden und welche noch nicht.

Allerdings muss man bedenken, dass die Spezifikation von HTML5 noch nicht fertig ist und sich daher noch einiges ändern kann. Zudem räumt der Entwickler ein, dass der Test nur überprüft ob die Funktionen im Browser bereit stehen. Die richtige Implementierung bzw. Umsetzung werden nicht näher geprüft.

Aktuell können maximal 300 Punkte erreicht werden. Hier eine kleine von mir erstellte Übersicht:

Browser Punkte
Firefox 3.6.8 139
Firefox 4.0 beta 2 189
Chrome 5.0.375.125
197
Chrome 6.0.472.22 dev
217
Internet Explorer 8
27
Opera 10.60
159
Safari 5.0.208
208

Kategorien: HTML5 & CSS3 Web-Design

Einheitliche Schreibweise für HTML5

Bisher benutzte die WHATWG HTML5 ohne Leerzeichen, während das W3C HTML 5 mit Leerzeichen verwendete.

Für die unterschiedliche Schreibweise gab es keine Gründe, vielmehr hat es sich durch einige Zufälle ergeben. Mittlerweile hat man sich auf HTML5 ohne Leerzeichen geeinigt.

Kategorien: HTML5 & CSS3 Sonstiges

XHTML 2.0 wird eingestellt – es lebe HTML 5

Zum Jahresende wird die World Wide Web Consortium (W3C) seine XHTML-2-Arbeitsgruppe schließen. Die Ressourcen sollen allesamt auf HTML 5 konzentriert werden, was die Entwicklung deutlich beschleunigen dürfte.

Dennoch wird es in Zukunft eine XML-basierte Formulierung von HTML geben. Die HTML 5 Spezifikation enthält sowohl einen Teil zur XML-Darstellung als auch zur text/html-Darstellung. An beiden will das W3C im Rahmen der HTML-Arbeitsgruppe weiterarbeiten, so dass die nächste Version einer in XML formulierten Version von HTML voraussichtlich in der HTML-5-Spezifikation enthalten sein wird.

Eine sehr positive Nachricht, wie ich finde. Man vermeidet zwei unterschiedliche Spezifikationen und kann gleichzeitig auf eine schnellere Entwicklung hoffen.

Kategorien: Coding HTML5 & CSS3