CSS

Schlagwort: CSS

18. November 2016 // Automatische Silbentrennung in Chrome 55

Eine gute Nachricht für alle, sowohl für Webdesigner als auch Smartphone-Nutzer: wenn ich alles richtig verstanden habe wird Chrome als zur Zeit meist genutzter Browser in der kommenden Version 55 nun endlich auch die automatische Silbentrennung („hyphens“) unterstützen. Dies verkündete Hauptentwickler Serg Hospodarets in einem Tweet auf Twitter:

Chrome adds CSS „hyphens“ rule support, which makes it cross-browser

Siehe dazu auch https://www.chromestatus.com/features/5642121184804864. Firefox und sogar der IE/Edge unterstützen hyphens schon seit vielen Jahren. Gerade für Texte in Deutsch mit relativ langen Wörtern ist es eine extrem nützliche Eigenschaft.

Endlich endlich endlich!

Nachtrag vom 09. Dezember 2016

Ein Satz mit x – das war wohl nix. Habe heute Chrome auf die Version 55 aktualisiert und keine Veränderung feststellen können. Ein netter Kommentator klärte mich dann auf:

It should be noted that the ’auto’ value (i.e. automatic hyphenation) is NOT supported in Chrome 55 on the Windows platform, and that this will be added at a later point.

Na toll, ich werde wohl kaum extra für Chrome die CSS-Einstellungen diverser Seiten auf „manual“ ändern und muss wohl weiter warten. Ärgerlich!

30. Januar 2016 // Webdesign-Tipps 10: CSS / multiple Klassen

Die Option, zur Gestaltung eines Elements auch mehrere CSS-Klassen verwenden zu können, erfreut sich leider keiner besonderen Bekanntheit. Dabei bietet diese, wie das folgende Beispiel zeigt, eine ideale Möglichkeit, eleganteren, kleineren und damit auch besser wartbaren Code zu schreiben.

Panikraum im Bundeskanzleramt

Zur Verdeutlichung ein Beispiel aus dem Leben. Stellen Sie sich ein Gebäude vor. Was hat ein Gebäude immer? In der Regel Wände, Türen, mehrere Fenster und ein Dach:

Gebäude { Wände; Türen; Fenster; Dach; }

Stellen wir uns weiter eine Jugendstilvilla am Bochumer Bergbaumuseum und das Bundeskanzleramt in Berlin vor. Das sind beides Gebäude, die abgrundtiefe architektonische Hässlichkeit des Bundeskanzleramtes gegenüber einer gepflegten Jugendstilvilla lassen wir hier einmal außen vor. Weiterlesen

18. April 2015 // Webdesign-Tipps 8: CSS / div auf Restbreite setzen

Kürzlich hatte ich ein kleines, aber fieses CSS-Problemchen in Zusammenhang mit „Responsive Webdesign“, dessen Lösung ich heute vorstellen möchte. Im Impressum einer Praxishomepage werden die gesetzlichen Pflichtangaben meist als zwei Spalten dargestellt. Das Ergebnis sollte wiefolgt aussehen:

Pflichtangaben Impressum
Der zuerst verwendete CSS-Code lautet:

.wrapper { width:100%; }
.wrapper .spalte-1 { float:left; width:40%; max-width:160px; }
.wrapper .spalte-2 { float:left; width:60%; }

Das Problem dabei ist die Angabe max-width bei .spalte-1. Diese soll verhindern, dass die erste Spalte zu breit wird und der Context mit Spalte 2 dann nicht mehr erkennbar ist. Weiterlesen

25. März 2015 // Webdesign-Tipps 7: Silbentrennung im Browser

Im Mai 2014 hatte ich im Rahmen des Artikels „Schlechtes Deutsch“ bereits einmal die Worttrennung nach Silben angesprochen. Bisher war eine solche Trennung für mich hinsichtlich Responsive Webdesign tabu, da man ja nie sagen kann, wie breit der Textbereich letztlich ist.

Kürzlich wurde mir bei einem Ausflug zu anderen Webseiten bewusst, dass schlaue Köpfen inzwischen eine Möglichkeit ersonnen haben, die Worttrennung per „Stylesheet“ zu automatisieren. Diese praktische Funktion steht in modernen Bowsern über die CSS3-Eigenschaft „hyphens“ zur Verfügung.

In den Beispielen im Netz wird der Code meist wiefolgt angewendet:

body { -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

Von dieser „globalen“ Lösung nahm ich allerdings relativ schnell Abstand, da die Silbentrennung für body bei jeder Textstelle einer Webseite erfolgt, also auch z.B. für alle Überschriften. In meinem Webdesign-Blog beispielsweise würde dann die Titelzeile „Web & Webdesign Blog“ uU als „Web & Web- design Blog“ getrennt, was ich aber vermeiden möchte. Weiterlesen

3. Mai 2014 // Webdesign-Tipps 5: Dropdown

Das Leben könnte so schön sein, wenn es nicht immer irgendjemanden gäbe, der einem garantiert in die Suppe spuckt. Im Layout zweier neuer Kunden setzte ich ursprünglich ein recht praktisches, handliches Dropdown-Menü ein, welches auf allen Geräten, die ich besitze und allen gängigen Auflösungen auch wunderbar funktioniert.

Als Spielverderber stellten sich allerdings im Nachhinein die Geräte der Firma mit dem Apfel heraus; aus mir immer noch nicht ganz erklärlichen Gründen öffnet sich das Dropdown-Menü dort nicht… Weiterlesen

16. Januar 2014 // Blamiere Dich täglich!

Zufälligerweise bot sich mir heute die Gelegenheit, meine Webseiten auf einem Mac mit Safari 5.1.9 zu testen. Dabei musste ich leider feststellen, dass ich seit längerem einen dicken Fehler in meinen responsiven Webseiten hatte, denn, als ich auf dem Obstrechner so durch meine Webseite scrollte, wurde ich blass: sämtliche Bilder waren in der Höhe total verzerrt. Wieso das?

Ich muss vorab sagen, dass ich meine Seiten eigentlich recht gewissenhaft teste: Chrome, Firefox, Internet Explorer und Opera. Da Apple den Safari-Browser für den PC nicht mehr anbietet hatte ich diese Tests allerdings schon länger nicht mehr gemacht, was sich natürlich prompt rächte… Weiterlesen

13. Oktober 2013 // Responsive Royale

Die Webseiten des Musiklabels und Musikverlages „Creme Royale“, an welchem ich beteiligt bin, wurden kürzlich von mir noch einmal runderneuert: HTML5, vereinfachte Menüführung und ein „Responsive Webdesign“ für eine passende Darstellung auf mobilen Endgeräten.
Screenshots cremeroyale.de

Spalten in CSS

Insbesondere die Unterseite zum Musikverlag brachte mich ins Schwitzen, dort findet sich eine Liste aller Verlagstitel, die es übersichtlich mit Cover und Informationstext zu präsentieren galt. Nach einigen Überlegungen entschied ich mich für die Anzeige in Form von einer oder mehrere Spalten, realisiert mittels CSS, siehe hier die Screenshots von drei möglichen Endgeräten: Weiterlesen

30. August 2013 // Webdesign-Tipps 4: Radiobuttons und Checkboxen mit CSS formatieren

Irgendwie habe ich das Gefühl, dass so ziemlich alle gängigen Browser mit Radiobuttons und Checkboxen auf Kriegsfuß stehen. Diese werden von Browser zu Browser anders positioniert und so gut wie nie so, dass diese zum Text passen. Hier zur Verdeutlichung der Problematik ein Ausschnitt aus meiner Seite im Vorher/Nachher-Vergleich:

Radiobuttons unformatiert / mit CSS formatiert
Manche mag der Versatz nach links und oben nicht stören, mich aber schon. Deshalb stelle heute für alle, die auch Wert auf ein schönes Schriftbild legen, meine Lösung des Problems in CSS vor, welche ich bei meinem Kostenrechner verwendet habe.

Zur Klarstellung: mir geht es hier nicht um das „tunen“ der Elemente, z.B. Änderung der Farbe oder andere Spielereien, mir geht es um die korrekte Positionierung vor dem Text, sodass sich der Button oder die Checkbox schön in das Textbild einfügt und das Formular nicht „zusammengefrickelt“ aussieht.

Weiterlesen