Anzeige
Anzeige
Arbeitswelt

Webworker-Wünsche

„Ein jeder Wunsch, wenn er erfüllt, kriegt augenblicklich Junge“, schrieb schon Wilhelm Busch. Nun dürfen Webworker also mit CSS3 hübsche neue Effekte nutzen. Die bekanntesten Vertreter sind sicher runde Ecken und Schlagschatten. Außerdem gibt es Media Queries, multiple Hintergründe, Attributselektoren oder das Multi-Column-Layout. Alles schön und gut. Aber schon wünschen wir uns: mehr.

3 Min.
Artikel merken
Anzeige
Anzeige

Im Dezember hat Inayaili de León (Yaili) eine interessante CSS-Wunschliste bei 24ways veröffentlicht [1], mit der sie bei vielen Webworkern offene Türen einrennt.

Anzeige
Anzeige

Die meisten Webworker richten ihr Design auf die erste Schrift aus, die unter font-family genannt wird. Ist diese nicht vorhanden, schnappt sich der Browser die nächste Schrift und zeigt sie gemäß CSS-Eigenschaften für die erste Schrift an. Aber in dem Fall würden wir vorher gerne Schriftgröße und Abstände noch einmal anpassen, denn die zweite Schrift sieht mit den CSS-Angaben der ersten nicht unbedingt genauso hübsch aus. Yaili schlägt die Eigenschaft font-size-adjust vor, die in Firefox bereits zur Verfügung steht. Damit können Webworker ein Ersatzfont in der Größe anpassen, um die x-Höhe beizubehalten [2]. Vorteilhafter wäre die Angabe einer eigenen Größe für jede Ersatzschrift.

Sinnvoll wäre auch eine Eigenschaft in der Art von „text-overflow: ellipsis“, um Text, der für eine bestimmte Box zu lang ist oder zu viele Zeilen enthält, abzuschneiden und am Ende mit einer Ellipse (…) zu kennzeichnen. So wäre es einfach, Überschriften auf eine Zeile zu zwingen oder Infoboxen nach x Zeilen abzuschneiden.

Anzeige
Anzeige

Und natürlich möchte der Designer nicht einfach irgendwelche Designs für neue Elemente wie <input type="date" /> aufs Auge gedrückt bekommen; ansonsten sehen diese so aus wie Operas Datepicker. Nützlich wäre es auch, Konstanten festlegen zu dürfen [3]. In vielen CSS-Files kommen etwa verschiedene Farben oder Abstände häufiger vor. Ändert der Webworker eine Angabe, muss er sie an x Stellen ändern. Hilfreich wäre es, ganz zu Beginn eine Konstante zu definieren, um nur eine Stelle ändern zu müssen.

Anzeige
Anzeige

Die Liste wird länger

Yailis Liste ist eine clevere Zusammenstellung von nützlichen CSS-Eigenschaften. Bei solch einer Vorgabe reihen sich die Kommentatoren meist mit eigenen klugen Wünschen ein. Drew McLellan schlägt ein simples „inherit: none;“ vor, das ein Element komplett auf Null setzt und alle geerbten Eigenschaften ignoriert.

Immer wieder taucht auch der Wunsch nach einem einfachen „vertical alignment“ auf. Wer sich schon einmal damit herumschlagen musste, ein Element vertikal in die Mitte zu bringen, wäre erfreut, das mit einem einfachen CSS-Eintrag zu erledigen.

Anzeige
Anzeige

Meine uneingeschränkte Unterstützung findet auch der Vorschlag, Hintergründe durch eine Art Crop auf eine bestimmte Größe zu beschränken. So könnten wir CSS-Sprites [4] viel effizienter zusammenbasteln und müsste nicht so viel leeren Platz in der Horizontalen oder Vertikalen vergeuden.

Und ganz ehrlich: Ein simples „//“ für einzeilige Kommentare in CSS wäre ebenfalls sehr hilfreich. Auch bezüglich eines Grundlinienrasters bestehen Verbesserungsmöglichkeiten. Im Print-Design eigentlich Standard, existiert für das Webdesign keine zufriedenstellende Lösung. Natürlich gibt es Möglichkeiten, seine Texte auf eine Grundlinie zu zwingen [5], aber richtig überzeugend sind die nicht. Viel einfacher wäre die Möglichkeit, Block-Elementen ein Grundlinienraster mitzugeben. Elemente, die sich nach dem Raster eines übergeordneten Elements richten sollen, erhalten eine neue Eigenschaft. So ließen sich auch Bilder nach dem Raster ausrichten. Das CSS-Modul „Line“ beschäftigt sich mit dem Grundlinienraster, ist aber bei einem Entwurf von 2002 stehengeblieben [6].

Der vielfache Wunsch nach Elternselektoren wie „article < h1“ hingegen hebelt das Prinzip von Cascading Style Sheets aus und ist – nach Meinung einiger Kommentatoren – auch nicht performant. Viele Wünsche lassen sich natürlich auch jetzt schon per JavaScript oder mit CSS-Compilern wie „Less“ oder „Sass“ umsetzen, aber mir wäre es recht, sie direkt als CSS-Eigenschaften zur Verfügung zu haben. Mehr Kontrolle mit ein paar Zeilen Code.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige