{"id":3219,"date":"2014-01-10T15:52:27","date_gmt":"2014-01-10T14:52:27","guid":{"rendered":"http:\/\/stg.blog-de.strato.wpcust.com\/blog\/?p=3219"},"modified":"2022-04-11T13:38:53","modified_gmt":"2022-04-11T11:38:53","slug":"css3-texte","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/css3-texte\/","title":{"rendered":"Mit CSS3 Texte sch\u00f6ner machen"},"content":{"rendered":"

Mit den neuen Webstandards lassen sich Texte besser formatieren denn je. Wir stellen die wichtigsten Neuerungen f\u00fcr Webmaster, Redakteure und Blogger vor. <\/p>\n

Moderne Websites m\u00fcssen responsiv, barrierefrei und performant sein. Die Antwort des World Wide Web Consortium (W3C)<\/a>: HTML5 und CSS3. Obwohl noch nicht offiziell Standard, unterst\u00fctzen g\u00e4ngige Browser viele der \u00c4nderungen bereits heute.<\/p>\n

Listen gestalten<\/h2>\n

\u201eDie neuen HTML-Elemente und CSS-Selektoren sorgen f\u00fcr eine bessere Trennung von Gestaltung und Inhalt\u201c, erkl\u00e4rt Karsten Weng, Senior UX Web Designer bei STRATO. Praktisch seien vor allem die neuen Selektoren f\u00fcr Pseudoklassen. \u201eDamit kann ich zum Beispiel festlegen, dass jeder zweite Listenpunkt eine andere Farbe hat.\u201c Der CSS-Code sieht dann in etwa so aus:<\/p>\n

ul li:nth-of-type(even) {
\ncolor:#3CF;
\n}<\/code><\/p>\n

Webfonts nutzen<\/h2>\n

Mit CSS3 k\u00f6nnen Schriften eingebunden werden, die nicht auf dem Computer des Betrachters installiert sind. Die Dateien werden dann von einer anderen Website bzw. Server importiert. Wichtig: Vor dem Einsatz die jeweiligen Lizenz- und Nutzungsrechte kl\u00e4ren.<\/p>\n

@font-face {
\nfont-family: 'meine_schrift';
\nsrc: url('pfad\/zu\/meine_schrift.ttf') format('truetype');
\n}<\/code><\/p>\n

Multi-Column Layout<\/h2>\n

Inhalte k\u00f6nnen endlich bequem in Spalten unterteilt werden, bei denen der Text automatisch umbricht. Die wichtigsten Eigenschaften column-width<\/em> und column-count<\/em> beschreiben dabei verschiedene Herangehensweisen: Entweder wird die Breite der Spalten vorgegeben oder deren Anzahl. F\u00fcr Spalten mit einer Breite von (mindestens) 200 Pixeln sieht der Code zum Beispiel folgenderma\u00dfen aus:<\/p>\n

#textfeld {
\nwidth: 500px;
\n-moz-column-width: 200px;
\n-webkit-column-width: 200px;
\ncolumn-width: 200px;
\n}<\/code><\/p>\n

Damit alle modernen Browser hier zwei Spalten mit je 200 Pixeln Breite darstellen, enth\u00e4lt dieser Code auch die sogenannten CSS-Browser Pr\u00e4fixes \u2013moz<\/em> und \u2013webkit<\/em>. Soll der Text dreispaltig sein, muss die Spaltenzahl festgelegt werden:<\/p>\n

#textfeld {
\nwidth: 500px;
\n-moz-column-count: 3;
\n-webkit-column-count: 3;
\ncolumn-count: 3;
\n}<\/code><\/p>\n

Aufgrund des vordefinierten column-gaps<\/em> von 1em sind die Spalten in diesem Fall etwas weniger als 166 Pixel breit.<\/p>\n

Fazit<\/h2>\n

HTML5 und CSS3 sind vor allem daf\u00fcr bekannt, Videos abspielen und abgerundete Ecken darstellen zu k\u00f6nnen. Doch auch Websites mit viel Text profitieren von den neuen Regeln. Vor allem das Multi-Column Layout Modul macht Webdesignern das Leben leichter. Schade nur, dass es keine Silbentrennung kennt.<\/p>\n

Noch werden die Neuerungen nicht von allen Browsern unterst\u00fctzt. Karsten Weng r\u00e4t deshalb zu Fallback-L\u00f6sungen. Wer auf Webfonts setzt, sollte also trotzdem alternative Schriften wie Arial und Times als zus\u00e4tzliche Absicherung angeben.<\/p>\n

Linktipps<\/strong><\/div>\n