css

Es gibt 27 Beiträge mit dem Schlagwort css.

clamp() – CSS: Cascading Style Sheets | MDN

The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a length, frequency, angle, time, percentage, number, or integer is allowed.

developer.mozilla.org/en-US/docs/Web/CSS/clamp

CSS Dig – Chrome Extension zur CSS-Analyse

Sicherlich erinnert ihr euch noch, als ich euch CSS Stats vorgestellt habe. Grundsätzlich ein gutes Tool, um seine CSS-Anweisungen zu untersuchen und ein CSS-Refactoring durchzuführen. Allerdings hatte CSS Stats zwei Nachteile: es ließ sich nur über Umwege für lokale Projekte nutzen und es hat die CSS-Datei oft gecached, so dass ich nicht mal eben meine Verbesserungen im Tool betrachten konnte.

Vor ein paar Tagen bin ich dann auf die Chrome Extension CSS Dig gestoßen und was soll ich sagen?! Auf den ersten Blick macht sie genau das, was ich bei CSS Stats vermisst habe. Empfehlenswert für jeden, der Chrome als primären Browser zur Webentwicklung nutzt.

Weiter zu CSS Dig

CSS-Refactoring

Kennt ihr das Gefühl, wenn ihr ein Buch gelesen habt und es euch in den Fingern kribbelt, das Gelernte direkt auszuprobieren und umzusetzen? Mir ging es so bei dem Buch Responsible Responsive Design.

Direkt am nächsten Tag schaute ich mir den Quelltext von Erdmann & Freunde an, der ja nun auch schon ein 3/4 Jahr alt war. Damals hatte ich mich für LESS entschieden, im Laufe des Jahres aber neue Projekte immer häufiger Projekte mit SCSS umgesetzt, so dass ich gerne mal Mixin-Aufrufe und Variablen falsch schrieb, wenn ich mal wieder in einem LESS-Projekt arbeitete. Ich entschloss mich, Erdmann & Freunde auf SCSS umzubauen und erhoffte mir dadurch auch, ein paar KB Anweisungen in meiner master.css Datei zu sparen. Nichtmal für „ein Paar“ hat es gereicht. Lediglich 1 KB sparte ich durch den Wechsel von LESS auf SCSS ein.

Weiterlesen →

CSS Stats

Erstellt, wie der Name schon sagt, Statistiken über die Stylesheets einer Website. Nützliches Tool, um die verwendeten Anweisungen auf Herz und Nieren zu prüfen, z.B. die Anzahl der verwendeten Farben, Verschachteln von Anweisungen (CSS-Specifity) uvm. Ich nutze es zurzeit, um für E&F ein CSS-Refactoring durchzuführen.

Zur Website

When to use @⁠extend; when to use a mixin

Eigentlich empfiehlt Harry Roberts @extend gar nicht zu nutzen:

„Let me start by saying that I would generally advise never to use @extend at all.“

Die falsche Verwendung führt schnell dazu, dass sich CSS-Dateien unnötig aufblasen und ein vielfaches ihrer eigentlichen Größe erreichen. Wer aber dennoch nicht auf die durchaus praktische Funktion verzichten will, für den hat Harry 3 Tipps.

Zum Artikel

CSS Guidelines von Harry Roberts

Ich weiß nicht wie es euch geht, aber ich bin immer wieder neugierig, wie andere Entwickler arbeiten. Ihre Herangehensweise an neue Projekte, welche Programme sie nutzen, sogar wie sie ihren Code bzw. CSS schreiben.

Umso erfreuter war ich, als ich vor ein paar Tagen dank Twitter auf das Projekt CSS Guidelines hingewiesen wurde. Zu Anfang noch sehr übersichtlich, entwickelt Harry Roberts den Guide Woche für Woche kontinuierlich weiter. Da das Projekt über freiwillige Spenden finanziert wird und ich für solche Infos sonst Bücher im Wert von 10-20 Dollar kaufen würde, ist es mir nicht besonders schwer gefallen, das Projekt zu unterstützen. Und das solltet ihr auch tun. Zumindest, wenn ihr noch weitere Tipps für das effizientere Schreiben und Anwenden von CSS erfahren wollt.

Zu den CSS Guidelines