Die Sammlung holografischer Sammelkarten von Simon Goellner (@simeydotme) hat unsere Aufmerksamkeit erregt.

Unter der Haube verbirgt sich eine Reihe von Kombinationen aus filter(), background-blend-mode(), mix-blend-mode() und clip-path(), die sorgfältig abgestimmt wurden, um den gewünschten Effekt zu erzielen. Ich habe am Ende ein kleines img { visibility: hidden; } in DevTools verwendet, um ein besseres Gefühl für jede Art von holografischem Effekt zu bekommen.

Josh Dance (@JoshDance) antwortete mit einer Aufschlüsselung der Effekte, die es Ihnen ermöglicht, die Eingaben manuell zu steuern.

Über einen Beitrag von Manuel Matuzović, der wiederum auf einer Demo von Temani Afif basiert.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

Sie würden sich selbst einen Gefallen tun, Manuels Aufschlüsselung dessen, was hier vor sich geht, zu lesen, aber es läuft im Grunde auf die Entsprechung dieser längeren Syntax hinaus.

Weiterlesen →

Die State of CSS Umfrage hat kürzlich begonnen. Letztes Jahr bestätigte die Umfrage alle Annahmen, dass TailwindCSS super beliebt ist und CSS-Variablen Mainstream sind. Sie kodifizierte auch, was viele von uns von CSS wollen, von Container Queries bis hin zu einem Parent-Selektor. (Spoiler-Alarm, wir haben jetzt beide.)

Obwohl ich nicht sagen würde, dass die Ergebnisse jedes Jahr super überraschend waren, bin ich dieses Mal gespannt, mehr historische Trends zu sehen. Die Umfrage läuft seit 2019, sodass vier Jahre (uralt in Frontend-Jahren!) an Daten zur Verfügung stehen, um zu sehen, ob bestimmte Frameworks kamen und gingen, ob spezifische Funktionen an Fahrt gewinnen, welche allgemeinen Lernpraktiken es gibt und einfach mehr Kontext. Es braucht Zeit, bis sich Dinge so aufbauen, daher ein großes Lob an Sacha Greif, dass er diese Sache am Laufen hält.

Weiterlesen →

Das Video von Chris Coyiers Vortrag auf der CascadiaJS 2022 ist jetzt verfügbar. Es ist sein erster persönlicher Vortrag seit über zwei Jahren, daher ist es großartig, unseren guten Freund wieder auf der Bühne zu sehen, der Juwelen darüber verteilt, was das Web heutzutage gut macht.

Container Queries! WAAPI! Scroll Timelines! offset-path! FLIP! Variable Fonts! Fluid Typography! Wir sind heutzutage wirklich mächtige Frontend-Entwickler.

Chris packt in einem 25-Minuten-Slot wirklich viel rein. Es tut gut, für diese kurze Zeit innezuhalten, um über die großartigen neuen Dinge für den Website-Bau nachzudenken und die Tatsache zu feiern, dass wir sie nutzen dürfen.

Und es gibt nichts Besseres, als Chris zu sehen, wie er den ganzen Raum als „Web-Nerds“ begrüßt. 🤓

Die neueste Spezifikation:

Eine Stilregel ist eine qualifizierte Regel, die eine Selektorliste mit einer Liste von Eigenschaftsdeklarationen und möglicherweise einer Liste von verschachtelten Regeln verknüpft. Sie werden in CSS2 auch als Regelsätze bezeichnet.

Louis Lazaris:

Wie das obige Zitat vom W3C andeutet, scheint das W3C die Bezeichnung „Regelsatz“ als etwas veraltet zu betrachten und bevorzugt den Begriff „Stilregel“ (oder eventuell kurz „Regel“).

Weiterlesen →

Puh, Safari 16 ist offiziell auf dem Markt und bietet eine Menge Funktionen, einige neu und aufregend (Subgrid! Container Queries! Font Palettes!) und andere, auf die wir für eine bessere plattformübergreifende Unterstützung gewartet haben (Motion Path! Overscroll Behavior! AVIF!). Ich stelle mir Jen Simmons vor, wie sie fröhlich die neuen Goodies in der Rundmail-Ankündigung schreibt.

Weiterlesen →

Ahmad Shadeed hat sich früh mit Container Queries beschäftigt und hat eine wachsende Sammlung von Beispielen, die auf alltäglichen Mustern basieren.

Weiterlesen →

Das GOV.UK-Team veröffentlichte kürzlich „How and why we removed jQuery from GOV.UK“. Dies war ein aufschlussreicher Einblick, wie eine Organisation ihre Werkzeuge bewerten kann und ob etwas immer noch das beste Werkzeug für den Job ist. Dies ist kein Anstoß, sofort Bibliotheken aus Ihrem aktuellen Projekt zu entfernen! Viele von uns unterstützen möglicherweise immer noch Alsprojekte und Browseranforderungen, die dies zu einer praktikablen Option machen.

Weiterlesen →

Die Zeit für CSS-Tricks ist vorbei. Jetzt ist die Zeit für CSS-Verbrechen!

In der aktuellen Landschaft der Content-Service-Anbieter sind Benutzer oft auf die Ausdrucksweise in Text, Links und Bildern beschränkt. Bereinigungsregeln entfernen in der Regel HTML, JavaScript und verschiedene Attribute.

Der Social-Media-Dienst Cohost ermöglicht es Benutzern, mehr Freiheiten mit Markup und Inline-Stilen zu haben, als wir es normalerweise gewohnt sind. Einige Benutzer haben diese Freiheit genutzt, um CSS-Verbrechen zu begehen! Dies hat zu kreativen Nachbildungen bekannter Benutzeroberflächen und interaktiver Spiele geführt, indem Eigenschaften auf unkonventionelle Weise verwendet wurden.

Weiterlesen →

Apple stellte auf der WWDC 2022 eine erweiterte Version seiner San Francisco Systemschrift vor. Dann, letzten Monat, befasste sich Jim Nielsen mit den Variationen der Schriftart und erklärte, wie die Schriftart ein Spektrum von Variationen basierend auf **Breite** und **Stärke** bietet. Dies ist eine bemerkenswerte Lektüre, wenn Sie sie noch nicht gelesen haben.

Weiterlesen →