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 …)
Die Reihenfolge der Deklaration von CSS Eigenschaften innerhalb eines Selectors folgt keinen festgelegten Regeln. Es bleibt jedem selbst überlassen, in welcher Reihenfolge die Eigenschaften deklariert werden. Ohne Struktur führt dies schnell zu einem großen Durcheinander und mutiert, spätestens in größeren Projekten und in Teamarbeit, zu einem echten Problem. Um dem entgegenzuwirken, gibt es verschiedene Ansätze oder Richtlinien, CSS Eigenschaften zu sortieren. Ich habe mich früh auf eine Variante, die alphabetische Sortierung, festgelegt: (mehr …)
Nach dem Redesign einer alten Website, die bisher noch nie etwas von „Responsive Webdesign“ gehört hat, gibt es in seltenen Fällen Inhalte, die so komplex, speziell oder statisch sind, dass sie nicht – zumindest nicht auf die Schnelle – auf mobile Endgeräte optimiert werden können. Dieser Fall trat kürzlich für eine einzelne Webseite eines Webportals ein und es stellte sich die Frage der geschicktesten Herangehensweise. (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.
In seltenen oder auch ekeligen Fällen kommt es vor, dass man z.B. durch einen <div>-Container hindurch auf ein Element hinter diesem klicken möchte. Zumeist tritt dieser Fall auf, wenn ein Teil des Inhalts durch ein halbtransparentes Hintergrundbild überlagert wird. Abhilfe schafft die CSS-Eigenschaft pointer-events. (mehr …)