In letzter Zeit hatte ich oft den Fall, dass ein Button im aktiven Status seine Aufschrift verändern soll. Über die Zeit hat sich aus einem ursprünglich etwas ungelenken Script, mit Hilfe des :not() Selectors, ein schlankes CSS-Snippet entwickelt.
CSS
.btn:not(.active) > .btn-label-active,
.btn.active > .btn-label-default {
display: none;
}Ab und zu kommt es vor, dass gerade kein Icon-Set oder gar eine Icon-Font zur Hand ist. In manchen Fällen wäre dies auch einfach overkill. Zum Beispiel dann, wenn eine Website überarbeitet wird, die ursprünglich nicht responsive war und eh keine Icons beinhaltet. Oder eben wenn eine neue Website erstellt wird, die sonst keine weiteren Icons benötigt.
Dann, und immer dann stelle ich mir die Frage, wie oder woher ich nun möglichst schnell ein Hamburger Icon – das Icon, welches gern für den „Menü-anzeigen/ausblenden-Button“ verwendet wird – bekomme, welches ich anschließend in die Website einbauen kann. Ohne jetzt großartig Photoshop oder Illustrator öffnen zu müssen.
Einige CSS Eigenschaften lassen sich zu kompakten Einzeilern, sogenannten Shorthands, zusammenfassen. Am Beispiel von padding wird die Platz- und Schreib-Ersparnis sichtbar.
.el {
// lange variante
padding-top: 20px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 5px;
// shorthand
padding: 20px 10px 15px 5px;
}Vier Zeilen schmelzen zu einer Zeile zusammen. In diesem Beispiel spart das nicht nur Platz, sondern auch Schreibarbeit und dient zudem der Übersichtlichkeit. Im Folgenden sind die wichtigsten Shorthands zur schnellen Übersicht in ihrer korrekten Schreibweise und Reihenfolge aufgeführt. (mehr …)
Geht das überhaupt? Ja, es ist möglich. Texte lassen sich mit der CSS Eigenschaft text-overflow auspunkten. Leider beschränkt sich diese Funktionalität jedoch auf einzeilige Texte. Perfekt für einzeilige Teaser in Listen, Tabellen oder Button-Beschriftungen. Den kompletten Text kann man beispielsweise bei Mouseover mit Hilfe eines Tooltips präsentieren.
Die Vorteile?
Für Code-Darstellungen auf Websites ist die voreingestellte Tabulator-Weite viel zu breit, schon bei kurzen Beispielen wirkt der angezeigte Code unübersichtlich:
<div>
<div>…</div>
…
</div>Zum manipulieren der Tabulator-Weite gibt es mit CSS3 nun die Eigenschaft tab-size:
pre {
-webkit-tab-size: 2;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
}<div>
<div>…</div>
…
</div>Wie an den Vendor-Prefixes gut zu erkennen ist, hat diese Eigenschaft leider noch nicht in allen Browsern Einzug erhalten. Abhilfe können hier JavaScript-Polyfills (1, 2) schaffen.