When to use (and not use) CSS shorthand properties https://lobste.rs/s/vpfdy5 #css
https://thoughtbot.com/blog/when-to-use-and-not-use-css-shorthand-properties
css
I'm not sure how much longer this is going to be available, but a CSS Course on making "whimsical animations" by @joshwcomeau is having an Open House - meaning, a few of the tutorials are available for free! Check them out while you can.
https://courses.joshwcomeau.com/wham/open-house/00-introduction
Hugo’s new CSS powers via @RunxiYu https://lobste.rs/s/uqjxtf #css #web
https://www.brycewray.com/posts/2026/04/hugos-new-css-powers/
A few ways of specifying per-theme colours in only CSS https://lobste.rs/s/budvjr #css
https://chrismorgan.info/css-themed-colours
After some fixes and more than 400+ commits, I'd like share my repo on UI Design now having a better life on Codeberg.
https://codeberg.org/tipoqueno/UI-Design
You'll get a huge list of resources to learn & practice User Interface Design (and more)
I started this in 2017 on Github but was archived 3 years ago because I started to dislike BS from Github and Microsoft.
Enjoy!
![Avatar for Mia [data-css=poetic]](/proxy/identity_icon/288817399110413826/c020510171.jpeg){kind=icon}
Hey y'all, I have a new workshop at the end of April - deepdive into modern CSS Layout techniques. Level up your team with a systemic understanding.
The intro video has a demo of #CSS grid areas. I’ll post more tips in the lead up. Early-bird pricing til April 12!
Edited 1y ago
Since 2009, I've been contributing to open web tools & standards, with a focus on CSS and related platform features at the W3C. But that work takes resources, making it hard for independent contributors like us @OddBird to stay involved.
We need support. If you appreciate what we're doing, you (or your company) can sponsor our work directly:
https://opencollective.com/oddbird-open-source
Let's keep building an open web for everyone.
People are debating the masonry layout, and I'm creating strange layouts.
A Pyramidal Grid of Hexagon Shapes! 👀
https://css-tip.com/pyramidal-grid/
A fully responsive implementation powered by modern CSS (corner-shape, sibling-index(), math functions, etc.) and no media queries.
🤔 "Add text-autospace to status content" https://github.com/mastodon/mastodon/pull/37694
From Webkit blog (https://webkit.org/blog/16574/webkit-features-in-safari-18-4/#text-auto-space): "WebKit defaults to `text-autospace: no-autospace` to match the current default behavior of older (currently all) browsers. The CSS specification calls for browsers to switch the default to `text-autospace: normal`…"
It's Baseline 2025 (newly available) on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace
👋 I'm looking for a Senior #Frontend Engineer job!
🚀 I am...
- a detail oriented senior engineer with 15 years of experience
- proficient with #JavaScript and #TypeScript, #CSS, #Vue, TDD
- experienced with #React, Ember.js, GCP, Terraform
🔎 I'm looking for:
- a collaborative environment between engineering + product & design teams
- a Germany / EU-based remote-first company
- ability to learn and grow
🚫 no crypto, web3, big oil, gen-ai, gambling
🙇 boost appreciated!
Can we get CSS 'logical shorthands' unstuck?
The WG recently added a `size` shorthand for width & height. People asked about inline-size & block-size as well. But that issue has stalled.
With a little funding, we could make it happen! #CSS
#Jellyfin scripting wizards, here's one for you. I wrote a bit of CSS to customize my layout. Now I'd like a backdrop for cast/crew pages, which can be the main backdrop of any of the movies they have featured on their page – granted there is one. Would this be possible with pure #CSS, or does that require #JS or #JSON?
Image 3 is some Tampermonkey #JavaScript trickery for Letterboxd that does just that > https://github.com/Tetrax-10/letterboxd-custom-images/tree/main
See alt for hopefully a better explanation.
Edited 213d ago
drafted snac.css
updated /var/snac/data/server.json
#snac2 #css
few colors
default fonts and everything
large high contrast font for content
small fonts for controls
dark and light color schemes
big and small screens
works with styles from my site
updated /var/snac/data/server.json
"cssurls": [ "/style.css", "/snac.css" ],
#snac2 #css
Edited 206d ago
What’s new in web typography?
This is a question I’ll be answering at this year’s https://webdayout.com
I’ll run along the cowpaths that have been paved and spend time with the new and shiny things that bring expressiveness, fine detail, responsiveness, consistency and efficiency to your work: variable fonts in all their glory, typographic units, drop-caps, hanging punctuation, `text-box-trim`, container-aware fonts and fluid type.
Use JOIN_RICH to get 10% off.
Randomly trying out the new CSS-customizable <select>, and… randomly found a bug that will hang and crash the page 🤦♂️😩 https://codepen.io/cheeaun/pen/jEEqpeR
I made it home, after a lovely series of conferences in Europe. Good to see many of you in person.
At the end of my talks, I announced (with a broken qr code) that I'm working on a #CSS course: Designing with Code. Subscribe for updates if you're interested!
Edited 1y ago
旋宮圖簡介brief introduction of Hsüan Kung Diagram
終於，我完成了旋宮圖簡介頁面！
Finally, I have completed the brief introduction page of Hsüan Kung Diagram!
Available in 漢語, English, 日本語, 㗂越(Tiếng Việtㅤ), 韓國語(한 국 어)·朝鮮語(조 선 어)!
#音樂 #樂理 #音樂理論 #中華 #中國音樂 #國樂 #民樂 #中樂 #華樂 #網頁 #編程 #music #musictheory #theory #chinese #chinesemusic #web #webpage #webpages #javascript #html #css #音乐 #乐理 #音乐理论 #中华 #中国音乐 #国乐 #民乐 #中乐 #华乐 #网页 #编程 #音楽 #中国 #旋宮圖 #旋宫图 #âmnhạc #amnhac #trungquoc #중국 #음악
Modern #CSS code snippets, side by side with the old hacks they replace.
"Stop writing CSS like it's 2015."
Bench Press: Leaking Text Nodes with CSS via @goldstein https://lobste.rs/s/qyugm7 #css #security
https://blog.pspaul.de/posts/bench-press-leaking-text-nodes-with-css/
Cross-Document View Transitions: The Gotchas Nobody Mentions via @lesley https://lobste.rs/s/4hnsdc #css #web
https://css-tricks.com/cross-document-view-transitions-part-1/
Hi, Mastodon 🦣 - could you help me out?
If you can test in actual Safari, is the slider here vertical like it is for me in Chrome/ Firefox? Or is it horizontal like it is the case in Epiphany?
https://codepen.io/thebabydino/pen/emzaEOR
If you cannot test in actual Safari, boosts appreciated.
Thanks! 🙏
Olive CSS: Lisp powered vanilla CSS utility-class a la Tailwind https://lobste.rs/s/unbgyx #css #lisp #web
https://codeberg.org/jjba23/olive-css
Something I recently discovered to be possible in TiddlyWiki is using `clamp()` in the `font-size` settings. It's sweet!