Sign in

martindrzka.bsky.social

@martindrzka.bsky.social
20 followers 85 following 22 posts
PostsRepliesMedia
Reposted by @martindrzka.bsky.social
IntentToShip @intenttoship.dev · 25/09/2026
Gecko: Intent to Ship: Scroll-driven Animations
groups.google.com
Gecko: Intent to Ship: Scroll-driven Animations
Gecko: Intent to Ship: Scroll-driven Animations
1459
Reposted by @martindrzka.bsky.social
Andy Bell @bell.bz · 18/09/2026
New on the blog
bell.bz
You’ll miss publishers when they’re gone
Ever since Piccalilli started to get traction, I’ve always seen CSS-Tricks, Smashing Magazine and A List Apart (among others) as peers. We all help each other behind the scenes and importantly, back each other. When CSS-Tricks was initially acquired by DigitalOcean, I was really happy for Chris. The work that he’d put into that publication…
08826
Reposted by @martindrzka.bsky.social
Firefox for Web Developers @webdevs.firefox.com · 19/08/2026
CSS text-box is newly baseline, and it's solves a common text layout issue. Here's how it works:
1234858
Reposted by @martindrzka.bsky.social
Martin Jurica 🐕 @maestrosill.bsky.social · 15/08/2026
Matouš alias @matesola.bsky.social (zde neaktivní 🤦‍♂️) vytvořil pro iOS naprosto geniální kalkulačku. Má to paměť, historii, nekonečnou účtenku (pás), zpětnou editaci, exporty, prostě pecka naprostá. Doporučuju vyzkoušet. A aby se o tom vědělo víc, dáme soutěž ;) apps.apple.com/cz/app/digit...
apps.apple.com
Aplikace DIGITCA – App Store
Stáhněte si v App Storu aplikaci DIGITCA vývojářské společnosti matous petran. Prohlédněte si snímky obrazovky, hodnocení a recenze, uživatelské tipy a další…
7145
Reposted by @martindrzka.bsky.social
Patrick Brosset @patrickbrosset.com · 07/08/2026
State of CSS 2026 results are in! It shows a familiar tension: devs love new CSS capabilities, but interop remains the biggest pain point. Read my analysis on my blog. And keep experimenting, use Baseline strategically, and help shape Interop priorities with real-world feedback!
patrickbrosset.com
Patrick - State of CSS 2026
The results to the State of CSS 2026 survey are now available. Here's my summary from the parts of the survey that are most relevant to my work on the web platform.
0154
Reposted by @martindrzka.bsky.social
Stefan Judis @stefanjudis.com · 17/07/2026
If you're dealing with SVG icons you probably know the pain of overwriting colors. There's a new spec in the making that allows controlling CSS variables from "the outside". And it's shipping in Firefox already! drafts.csswg.org...
Code snippet: img { link-parameters: param(--color, green); } and .foo { background-image: url("image.svg", param(--color, green)); }
613725
Reposted by @martindrzka.bsky.social
Saron Yitbarek @saron.bsky.social · 16/06/2026
Icon-only options in a customizable <select> break three things: ❌️ users who don't recognize the icon have no help ❌️screen readers have nothing to announce ❌️browsers w/o support show an empty dropdown There's just 1 fix for all three cases: keep the text Learn more:
webkit.org
The golden rule of Customizable Select
Customizable select is coming to Safari 27.
15318
Reposted by @martindrzka.bsky.social
Lea Verou, PhD @lea.verou.me · 13/06/2026
The people of #cssday have spoken: we want gamut mapping and we want it NOW!
134610
martindrzka.bsky.social @martindrzka.bsky.social · 14/06/2026
@cssday.nl Hi, are you planning to publish videos from the conference for a fee?
100
Reposted by @martindrzka.bsky.social
Jake Archibald @jakearchibald.com · 11/06/2026
37% of users change their text scale sizes on iOS/Android - @joshtumath.uk
Josh presenting that fact on stage
48112
Reposted by @martindrzka.bsky.social
Eric Bailey @ericwbailey.website · 27/05/2026
Just attended a lovely talk where a product went from 6.6 seconds to 0.8 seconds for first contentful paint by ditching MUI and CSS-in-JS and using vanilla CSS with in-house components instead. #webexpo
311118
Reposted by @martindrzka.bsky.social
Sara Soueidan @sarasoueidan.com · 15/05/2026
I just sent an email newsletter out 📬 announcing a soft-launch of this year's Global Accessibility Awareness Day #GAAD promotion: For the next two weeks, the Practical Accessibility course is going on sale! 25% off ($299 instead of $399) 🎁 Sale ends on June 1st ⏳ practical-accessibility.today
practical-accessibility.today
The Practical Accessibility Course
A get-right-down-to-it online course for Web designers and developers who want to start creating more accessible Web user interfaces and digital products today
14528
Reposted by @martindrzka.bsky.social
Kevin Powell @kevinpowell.co · 30/04/2026
Don't feel confident with either Flexbox or Grid? I recently created a free learning path for each of them over on The Cascade. The paths are curated videos from my YouTube channel, along with code editors to follow along with, and extra challenges to reinforce what you're learning.
thecascade.dev
Free learning paths by Kevin Powell
Focused topics, clear order. Each learning path guides you through one concept at a time, with curated resources to help you build real understanding.
04813
Reposted by @martindrzka.bsky.social
kottke.org @kottke.org · 22/04/2026
Well, here it is at last: the new Boards of Canada album is called Inferno and it will be released on May 28. Pre-order or pre-save the album. [warp.net]
warp.net
Inferno by Boards of Canada - Releases - WARP
1225
Reposted by @martindrzka.bsky.social
Brecht De Ruyte @utilitybend.com · 21/04/2026
The customisable <select> is here, and it loves modern CSS features: Anchoring, transitions, scroll snapping, and more. I will write a love letter on this new feature at @webexpo.bsky.social Conference in Prague. Use STAGEBRECHT for a 40 EUR discount on a conference ticket.
191
Reposted by @martindrzka.bsky.social
Eric Bailey @ericwbailey.website · 21/04/2026
ARIA is inevitable when you work on web accessibility. Here's everything I wish someone told me when I first got started, presented at @webexpo.bsky.social in Prague on May 28th. #a11y webexpo.net/prague2026/s...
A photo of me smiling, framed by the text, "What I wish someone told me when I first started using ARIA". Next to my photo is a badge that reads, "I'm speaking at WebExpo! Add promo code s t a g e e r i c to save 40 EUR." The frame is labeled as a conference talk presented by Eric Bailey, Senior Accessibility Designer at GitHub. The talk has also been labeled, "Accessibility", "Design Systems", "Design Thinking & UX", and "Frontend Dev".
3436
martindrzka.bsky.social @martindrzka.bsky.social · 21/04/2026
adrianroselli.com/2025/06/wher...
adrianroselli.com
Where to Put Focus When Opening a Modal Dialog
TL;DR: blanket statements about where to put focus when opening a modal dialog are wrong, including this one. This post is meant to help you, an intelligent and thoughtful and empathetic reader, figur...
010
Reposted by @martindrzka.bsky.social
Jason Grigsby @gri.gs · 20/03/2026
This is an absolutely horrible idea and Google should be bloody ashamed for even testing it. Turn the experiment off and destroy the source code. www.theverge.com/tech/896490/...
theverge.com
Google Search is now using AI to replace headlines
Let us know if you see more.
1236
Reposted by @martindrzka.bsky.social
David Bushell 🪿 @dbushell.com · 22/02/2026
"AI is locking people out. At Scale." conesible.de/wab/
conesible.de
Accessibility Is Civil Rights. AI Must Stop Shipping Barriers.
0104
Reposted by @martindrzka.bsky.social
Michael G @g12n.de · 01/02/2026
Demonstrating Implicit anchor association on @codepen.io The browser automatically creates an anchor relationship between elements based on their semantic connection. Without you explicitly defining an anchor-name position-anchor pair. Best hidden feature of CSS Anchor. codepen.io/g12n/details...
codepen.io
Implicit anchor association
Demonstrating **implicit anchor positioning in CSS**, where the browser automatically creates an anchor relationship between elements based on their se...
034
martindrzka.bsky.social @martindrzka.bsky.social · 11/12/2025
Wonderful relaxing reading, elegant photo transitions, soothing piano by Nils Frahm and others. More places like this on the internet these days 🙏
strangersbyspring.com
Strangers By Spring
Strangers, By Spring is a blog about escapism, romance, and rebirth.
010
martindrzka.bsky.social @martindrzka.bsky.social · 10/12/2025
htmhell.dev/adventcalend... "The lang attribute is a tiny line of code that provides universal access to your content. It's arguably the easiest, fastest, and most impactful accessibility fix you can make on any website."
htmhell.dev
Accessible by Design: The Role of the 'lang' Attribute - HTMHell
A collection of bad practices in HTML, copied from real websites.
000
Reposted by @martindrzka.bsky.social
Ana Tudor @anatudor.bsky.social · 07/08/2025
`transition-property: all` annoys me to no end. There is almost never any reason to write that in your CSS. It's not just the performance thing. It's also the fact that it's the damn default. Know your damn defaults!
0111
Reposted by @martindrzka.bsky.social
David Darnes @darn.es · 07/08/2025
transform & opacity If you can do your animations with only these then do it. Others will likely cause the below to happen
0132
martindrzka.bsky.social @martindrzka.bsky.social · 29/07/2025
Any idea if can style `optgroups` within a custom `select`? codepen.io/martindrzka/... @nerdy.dev @una.im
codepen.io
Custom select optgroup styles?
...
000
Reposted by @martindrzka.bsky.social
Jen Simmons @jensimmons.bsky.social · 25/07/2025
What do you need most from WebKit (the rendering engine for Safari that runs your HTML, CSS, JS, and more)? If you are making websites, what could we do in WebKit to make it easier for you to create fantastic experiences for your users?
434616
Reposted by @martindrzka.bsky.social
Jen Simmons @jensimmons.bsky.social · 01/07/2025
If you code websites, then you KNOW how it’s been to style form controls. Watch this #cssday talk from @ntim.bsky.social to learn why it’s been so hard, and how we are going to fix it for the future. www.youtube.com/watch?v=WgSi... #css #webdev #formcontrols
youtube.com
Form control styling - Tim Nguyen - CSS Day 2025
YouTube video by Web Conferences Amsterdam
19326
Reposted by @martindrzka.bsky.social
MDN Web Docs @developer.mozilla.org · 24/07/2025
MDN is 20 years old! 🥳 🙏 A huge thank you to... The devs who read and trust MDN The contributors who improve it Everyone working on the web platform who shares our mission. Here's how we celebrated with the web.dev team! 🧁 developer.mozilla.org/en-US/blog/...
developer.mozilla.org
Celebrating 20 years of MDN | MDN Blog
MDN turns 20! Let's look at how we started, how MDN became the most trusted resource for web developers, the impact it's had on the open web, and yes, there's cake, too.
410529
martindrzka.bsky.social @martindrzka.bsky.social · 16/07/2025
It a shame that most of these nice layouts and niches from print world can't be done across all modern browsers these days. But if your aiming medium is just PDF PrinceXML can do most of them :) www.youtube.com/watch?v=NfwD... Excellent talk from @rachelandrew.bsky.social #cssday
youtube.com
Multicol and fragmentation - Rachel Andrew - CSS Day 2025
YouTube video by Web Conferences Amsterdam
010
martindrzka.bsky.social @martindrzka.bsky.social · 05/07/2025
apearance: base; and plenty of new pseudoselectors. Hopefully new era of styling form fields will be less painfull youtu.be/WgSiqSqxTxw
youtu.be
Form control styling - Tim Nguyen - CSS Day 2025
YouTube video by Web Conferences Amsterdam
000
Reposted by @martindrzka.bsky.social
Dave Rupert @davatron5000.bsky.social · 07/06/2025
Was filling out a work form on a portal and –I don't mean to distrub anyone too much (especially over the weekend)– but the 8 and the 3 were upside down.
A text input labelled "Amount" with "$80.32" written inside, but the eight has a larger circle on the top than the bottom and the three character has a larger curve on the top as well. Subtle but disorienting.
4968866
Reposted by @martindrzka.bsky.social
God @thegodshow.com · 07/06/2025
Welcome to America, where protesting illegal kidnappings without due process is an insurrection, but attacking the nation’s Capitol is not.
protesters surround federal detention center in Los Angeles
23044884614922
Reposted by @martindrzka.bsky.social
Manuel Matuzović @matuzo.at · 06/06/2025
Here's an example for why using placeholders instead of visible labels is a bad idea. I tried to order something. See how street and street number are empty? The browser prefilled the address but in the wrong field. I don't know which field and I can't trust the form now. I have to check everything.
Billing address form. A couple of fields prefilled. Street and number fields are empty. The address is in another field. It's impossible to tell in which field because there are no visible labels.
3185
martindrzka.bsky.social @martindrzka.bsky.social · 07/06/2025
Soon in all major browsers 😍
000
Reposted by @martindrzka.bsky.social
Dennis Frank @freshmango.bsky.social · 06/06/2025
So, so true. The gap between design tools and the possibilities of the CSS based web platform is getting bigger year by year. @ishadeed.com at #cssday. (Reminds me of @matthiasott.com‘s talk last year cssday.nl/2024/#matthias)
Ahmad on stage showing a slide titled ”Building a layout” where the feature gap between Figma and modern CSS is visualized in two differently sized circles which contain keywords of different technological features. Text between both circle: “The gap is getting bigger year by year.”
48516
Reposted by @martindrzka.bsky.social
Patrick Brosset @patrickbrosset.com · 05/06/2025
The ability to style grid and flex gaps is coming fast in a browser near you! Bubbling with ideas for what this will be useful for! Code: github.com/MicrosoftEdg...
Webpage layout example, dark background, light text, and light separator lines between the various items like header, navigation, and between various pieces of text and images in the main content. The lines are horizontal and vertical, and have different styles.Magazine-like webpage, with a header, navigation, three articles, and a sidebar with a sudoku game grid.
The various pieces of the UI are visually separated with horizontal and vertical lines of different styles.
The sudoku game grid has differently styled lines too, which are also achieved with the CSS gap decorations feature.A notebook sheet demo web page. It has a date, title, and then some lines of text in the main area of the page.
There's a line that separates the header, the footer, and a line for the margin on the side. In the main area, there are also more subtle lines where the text is written.A magazine-style layout demo. The site is called "The Daily Oddity", and it has fake articles about weird facts and news.
The site uses multiple columns of content, which are separated by vertical and horizontal lines to make them more visually distinct.
57419
martindrzka.bsky.social @martindrzka.bsky.social · 19/03/2025
Hell yeah webkit.org/blog/16523/r... - Added support for Scroll Driven Animations. - Added support for text-wrap-style: pretty. - Added support for CSS Anchor Positioning.
webkit.org
Release Notes for Safari Technology Preview 215
Safari Technology Preview Release 215 is now available for download for macOS Sequoia and macOS Sonoma.
000