|
CSS Curiosities of the Past ā A wonderful tour of the non-standard CSS quirks developers used to make browsers behave, especially Internet Explorer. Covers the 'star hack', CSS expressions (JavaScript in your CSS!), IE's DirectX filters, the famous box model hack, and more.
Declan Chidlow
|
|
ā
Ā The Front-End Checklist ā We've shared this before, but it's kept improving and now has almost 400 frontend quality rules covering accessibility, performance, security, SEO, and more. You can also now connect it to Claude, Cursor, and other AI tools over MCP so they review against the same standards.
David Dias
|
|
ā”ļø IN BRIEF
-
š§ Safari 27 has shipped (alongside iOS, iPadOS, and macOS 27), bringing customizable <select> elements, sizes="auto" on images, the :heading pseudo-class, alpha(), multi-color color-mix(), and more.
-
š¤ Apple has also shared details on how you can hook up an AI agent to Safari, as of Safari 27, for testing, debugging, etc.
-
š Chrome 153 is out, adding single-axis scroll containers (in non-stable channels only) and the <camera> and <microphone> elements. Chrome 154 is now in beta, too.
-
š¤ Last week, Automattic's board forced CEO Matt Mullenweg into a leave of absence, before Mullenweg declared that he was "back in control".
-
ā³ļø We often share links to the helpful articles on CSS-Tricks, but it's gone quiet recently. Editor Geoff Graham sheds some light on why.
|
|
|
š Articles, Opinions &Ā Tutorials
|
|
Better Icon and Label Alignment ā When text is just one line, an accompanying icon is nicely vertically centered, but when the text has multiple lines, the icon is still 'centered' but can look oddly misplaced⦠Ahmad explores a fix using CSS's lhĀ unit.
Ahmad Shadeed
|
|
The Case Against JPEG XL (in the Browser) ā With JPEG XL decoding making its way into Chrome and Firefox, an AV1 encoder developer who once backed the format argues it offers little advantage over AVIF for theĀ web.
Gianni Rosato
|
|
WebKit Supports interactive-widget (and Hopefully Safari Will Too?) ā WebKit recently gained support for interactive-widget, the viewport <meta> directive that controls how a page resizes when the virtual keyboard appears. Bramus built WebKit locally to test it and recaps the three modes with side-by-sideĀ visuals.
Bramus Van Damme
|
|
Sidenotes with CSS Anchor Positioning ā A walkthrough of building Tufte-style sidenotes (margin notes instead of footnotes - as above) with anchor positioning. It's JavaScript-free, multi-block, and degrades gracefully on narrow viewports and olderĀ browsers.
Vincent Bernat
|
|
Animating CSS border-image ā How to animate border styles (using an image or gradient) to create some interesting user interfaceĀ effects.
Preethi Sam
|
|
A Deep Dive into StyleX ā Here's a hands-on tour of Metaās StyleX, a library which turns JavaScript style objects into plain atomic CSS at build time. Flavio also looks at why it can be a good fit for coding agents inĀ particular.
Flavio Copes
|
|
š§° Tools, Code & Resources
|
|
SnapDOM 3.0: Turn DOM Elements Into Images ā A no-dependency html2canvas alternative with support for web fonts, pseudo-elements and Shadow DOM. v3.0 adds āincremental recaptureā for faster repeat captures, automatic web font embedding, and fromString() for turning raw HTML markup intoĀ images.
Zumerlab
|
|
š No more regex hacks for PDF data. Foxit's Extraction API reads tables, fields, and layout, then returns cleanĀ JSON.
ā”ļø Add lightning-fast 1D/2D barcode scanning to your web app with STRICH, a lean JS SDK. Simple, predictable pricing. Free trial andĀ demo!
|
|
|
Page Rage: Take Out Your Stress on a Web Page ā Ever get a bit flustered when building a site? Work out some of that stress by destroying several pre-made pages here, or install the browser extension to smash up any web page to your heartāsĀ content.
Alex Reardon
|
|