[Robin]: Nehmen wir an, Sie benötigen einige Utility-Klassen für Abstände (Margin und Padding). In Tailwind würden Sie zum Beispiel etwas HTML so schreiben

<div class="pt-6"...</div

Dies setzt die CSS-Eigenschaft padding-top auf 6 in der Skala. 1 ist weniger ...

[Robin]: In letzter Zeit haben wir im Newsletter über tolle Dinge geschrieben, die wir in Zukunft mit CSS machen können. CSS-Verschachtelung! Containerabfragen! Abfrageeinheiten! Neue Pseudoelemente! Das alles ist sehr aufregend, aber ich denke, wir müssen langsam ...

Das Verschachteln von CSS-Klassen ist ziemlich praktisch. Wenn Sie mit Präprozessor-Sprachen wie Sass und Less vertraut sind, sind Sie wahrscheinlich an Verschachtelungen wie diese gewöhnt

.card {
  .card-text {
    font-size: 1em;
  }
  &.card-large {
    padding: 2em;
  }
  body.home & .card-title 

Hier ist Chris, der Robin, unseren üblichen wöchentlichen Korrespondenten, vertritt. Und wo wir gerade von Robin sprechen, Sie sollten seinen Blog abonnieren, da es ein großartiger persönlicher Blog ist, den er zu Astro umzieht und darüber schreibt, was nur eine würdige ...

[Robin]: Haben Sie jemals von CSS-Abfrageeinheiten (CSS query units) gehört? Sie existieren in CSS noch nicht, aber lassen Sie mich Ihnen erklären, wie nützlich sie sein könnten. Ich bin nur zufällig auf die Idee gestoßen, weil ich ...

Ich muss eine schreckliche Beichte ablegen. Schicken Sie mich ins Gefängnis und werfen Sie den Schlüssel weg, denn obwohl ich so viel über variable Schriftarten schimpfe, habe ich sie nie wirklich benutzt. Ich habe Tutorials und Demos gelesen und liebe es zu sehen, was ...

[Robin]: Ich habe im Laufe der Jahre an vielen Meetings teilgenommen; solche, die unorganisiert und etwas zäh waren, solche, bei denen unklar war, warum sie überhaupt Meetings sein mussten, oder verdammt noch mal Meetings, die ...

[Robin]: Wenn es um Webentwicklung geht, habe ich das Gefühl, dass sich Bilder in den letzten Jahren in einem ständigen Wandel befanden. Was ist der beste Weg, ein Bild auf einer Website einzufügen? Nun, diese Frage ist viel ...

[Robin]: Max Böck fragt wann wir @container- oder @media-Abfragen verwenden sollten?

Obwohl ich denke, dass Containerabfragen irgendwann die meisten "Low-Level"-Responsive Logiken ersetzen werden, gibt es immer noch viele gute Anwendungsfälle für vertrauenswürdige Media Queries.

Eine Kombination

[Robin]: Aufregende Neuigkeiten! Diese Woche wurde Astro offiziell eingeführt – es ist ein Static-Site-Builder, der, nun ja, ziemlich verdammt aufregend ist.

In Astro komponieren Sie Ihre Website mit UI-Komponenten aus Ihrem bevorzugten JavaScript-Webframework (React, Svelte, Vue,

Aus irgendeinem Grund bin ich diese Woche zu den absoluten Grundlagen von HTML und CSS zurückgekehrt und habe viele Blogbeiträge durchgesehen, die mich daran erinnern, dass ich immer noch Wissenslücken habe, wenn es um ...

[Robin]: Anfang dieser Woche stieß ich auf ein Problem, für dessen Lösung mir nur eine hypothetische Idee einfiel: ein :nth-letter-Selektor in CSS. Er würde ungefähr so funktionieren:

.element:nth-letter(2) {
  color: red;
}

Ähnlich wie :nth-child...

[Robin]: Stefánia Péter hat eine coole Website namens CSS Hell erstellt. Sie sagt uns, was wir beim Schreiben von CSS vermeiden sollten, und mir gefällt dieser Hinweis zu Spezifität

Entwickler schreiben oft übermäßig spezifische Selektoren, nur um zu 10000% sicher zu sein, dass ihre

[Robin]: Zuerst diese Woche schrieb Una Kravets darüber, wie wunderbar die Zukunft mit Containerabfragen sein wird.

Containerabfragen werden die größte Veränderung im Web-Styling seit CSS3 sein und unsere Perspektive auf das, was „Responsive Design“ bedeutet, verändern.

[Robin]: Diese Woche habe ich über diesen Beitrag des Teams von gov.uk nachgedacht, in dem sie darüber schreiben, wie sie einen Button erstellt haben, um das Passwort eines Eingabefelds anzuzeigen und auszublenden. Sie tun dies, indem sie zwischen den ...

[Robin]: Ich dachte, ich wüsste alles über responsive Bilder, aber dieser Artikel von Addy Osmani hat mich eines Besseren belehrt. Er schreibt darüber, wie sich Bilder auf die Leistung auswirken und wie das mit den Core Web Vitals von Google zusammenhängt, geht aber ...

[Robin]: Stellen Sie sich vor, Sie könnten in die Zukunft reisen – sagen wir, zehn Jahre – und zusehen, wie Sie CSS schreiben. Wie würde das aussehen? Wie viel der Sprache wird sich Ihrer Meinung nach in diesem Zeitraum ändern? ...

[Robin]: Es war ein langer und verschlungener Weg, aber Containerabfragen beginnen zu kommen. Sie sind gerade in Chrome Canary gelandet. Ich habe diese Nachricht zuerst vor ein paar Wochen auf Andy Bells Blog entdeckt, als er einen großartigen ...

[Robin]: Meine Lieblingswebsite im Moment ist Volume, „eine Publikationsplattform für hochwertige illustrierte Bücher“. Es ist ein Ort, an dem Sie buchbezogene Projekte starten können, aber am Ende entstehen daraus diese riesigen und wunderschönen ...

Die Space Jam Website war eine Zeitkapsel. Sie gingen zu spacejam.com und wurden sofort ins Jahr 1996 zurückversetzt; eine Zeit vor CSS, eine Zeit, in der die Verwendung von <table>-Elementen für Grids und Layouts auf einer Seite cool war, ...