A rather geeky/technical weblog, est. 2001, by Bramus
No-JS Fingerprinting is a POC that you can do fingerprinting — a way of uniquely identifying browsers — without the need for JavaScript. Fingerprinting is a way of identifying browsers without the use of cookies or data storage. Created using properties like language and installed fonts, your fingerprint stays the same even if your browser …
October is the month of “Divtober”, where artists are challenged to draw different things using CSS and a single HTML element. Each day they get a theme to work with. You can find some nice works on CodePen, all tagged #divtober. Here’s a small selection: See the Pen Single div CSS chili garlic sauce by …
Interesting little CSS snippet by Shawn Wang. This should be simple drop-in css to look good on most displays It’s an enhancement that builds on top of the User-Agent provided styles to make your content more easily consumable by limiting line-length, centring the content column, adding some whitespace, bumping up the font-size, etc. html { …
Continue reading “100 Bytes of CSS to look great everywhere”
A media feature like width can take its value from a range. When used, we prefix these with min- or max- to express “minimum condition” or “maximum condition” constraints. @media (min-width: 300px) and (max-width: 750px) { … } In CSS Media Queries Level 4 these type of Media Features can now be written as a …
Continue reading “Media Queries Level 4: Media Query Range Contexts (Media Query Ranges)“
On Twitter, John Allsopp recently shared that Flexbox is the greatest thing that happed to CSS. I quickly chimed in with my personal favourite. To me the single greatest addition to CSS over the past 20 years is Custom Properties. They’ve opened up a ton of possibilities, and make us CSS Authors way more productive. …
Matthias Ott: In this post, I will share my current take on CSS structure. It does not religiously follow any particular methodology, although people familiar with Harry Roberts’ ITCSS (“Inverted Triangle CSS”) will definitely recognize parts of his methodology. The folder structure indeed looks very familiar: /scss/ ├── 1-settings ├── 2-design-tokens ├── 3-tools ├── 4-generic …
Stefan Judis has reworked Ahmad Shadeed‘s Conditional border-radius, using these three (future) CSS additions: Media query ranges Container Queries CSS @when + @else Unlike the original code, the result definitely is a very nice and readable piece of code that doesn’t feel hacky at all — I like where CSS is headed 😊 Conditional border-radius …
Continue reading “Conditional border-radius and three future CSS features”
Did you know you can import JSON and CSS files just like you import JavaScript Modules? Thanks to Import Assertions, it’s as easy as this: Building upon "Import Assertions" we recently saw JSON Modules land in V8/Chromium 91: “`import json from './foo.json' assert { type: 'json' };“` In Chromium 93 the same thing for CSS …
Continue reading “ESNext: Import Assertions (JSON Modules, CSS Modules, …)”
Love this Pen from Adrian Roselli where you can easily switch between Physical and Logical Properties. 💡 Someone should fork this and add toggles to change the writing-mode / direction. Related: CSS Logical Properties Are the Future of the Web & i18n →
At (the ongoing) TPAC 2021 — the W3C Annual Conference — the CSS Working Group provided two video updates that summarize some of the ongoing work they’ve been doing. Perfect way to get up to speed in less than 10 minutes Improving CSS Architecture with Cascade Layers, Container Queries, Scope In this video Miriam Suzanne …