#css — Public Fediverse posts

2026 and #HTML #CSS can't still do a trivial multicolumn layout with horizontal scrolling. But hey at least we're getting rid of the only truly useful and powerful templating system the web ever had.

#cssChallenge

2026 and #HTML #CSS can't still do a trivial multicolumn layout with horizontal scrolling. But hey at least we're getting rid of the only truly useful and powerful templating system the web ever had.

#cssChallenge

Improved CSS Text-Stroke, by @tylersticka:

https://tylersticka.com/journal/improved-css-text-stroke/?ref=frontenddogma.com

#css #effects

Improved CSS Text-Stroke, by @tylersticka:

https://tylersticka.com/journal/improved-css-text-stroke/?ref=frontenddogma.com

#css #effects

So, #BlackHat2026 was a week ago. Time for stories from the trenches!

Running NOC at BlackHat:
https://www.techtarget.com/cybersecurity/news/366649216/Behind-the-scenes-at-Black-Hats-network-operations-center

Key news, takeaways and security trends:
https://www.techtarget.com/cybersecurity/conference/Black-Hat-2026-Key-news-takeaways-and-security-trends

#AI is coming for your #infosec and it's coming hard. #CSS can be used for exfiltration. #iOS exploits are traveling the criminal underworld quickly. System destruction upon acquisition is rising. AI #agentic browsers are ridiculously easy to exploit. And more! #TechTarget did a great job covering the conference.

So, #BlackHat2026 was a week ago. Time for stories from the trenches!

Running NOC at BlackHat:
https://www.techtarget.com/cybersecurity/news/366649216/Behind-the-scenes-at-Black-Hats-network-operations-center

Key news, takeaways and security trends:
https://www.techtarget.com/cybersecurity/conference/Black-Hat-2026-Key-news-takeaways-and-security-trends

#AI is coming for your #infosec and it's coming hard. #CSS can be used for exfiltration. #iOS exploits are traveling the criminal underworld quickly. System destruction upon acquisition is rising. AI #agentic browsers are ridiculously easy to exploit. And more! #TechTarget did a great job covering the conference.

Question pour les amateurices de personnalisation d'UI : j'aimerais bien changer la couleur de l'ascensceur dans ma scrollbar Firefox (enfin ZenBrowser) car mon thème sombre manque un peu de contraste. Sur une lecture longue, j'ai du mal à savoir où j'en suis !
J'ai fait quelques recherche, mais en vain pour l'instant…

Si quelqu'un·e a des idées, je suis preneur !

#UI #Firefox #ZenBrowser #CSS #Tweaking

Cheatsheets for Flex, Grid, Anchor Positioning and Invoker Commands, by @polypane.app:

https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/?ref=frontenddogma.com

#cheatsheets #css #flexbox #grids #layout #anchorpositioning

Cheatsheets for Flex, Grid, Anchor Positioning and Invoker Commands, by @polypane.app:

https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/?ref=frontenddogma.com

#cheatsheets #css #flexbox #grids #layout #anchorpositioning

Wild trick presented by @kevinpowell when you apply a change on :hover, and the new style stick after you move the cursor away. Inspired by @argyleink . Absolutely wild little CSS trick!

https://www.youtube.com/shorts/wazlBxxTohA

#css

Wild trick presented by @kevinpowell when you apply a change on :hover, and the new style stick after you move the cursor away. Inspired by @argyleink . Absolutely wild little CSS trick!

https://www.youtube.com/shorts/wazlBxxTohA

#css

I really like this chain of blog posts.

First, Abhishek Jakhar published "Tooltips Need a Delay, and Then They Need to Skip It" with his solution for nicely times tooltips.

https://master.dev/blog/tooltips-need-a-delay-and-then-they-need-to-skip-it/

The @chriscoyier answered with his pure CSS solution on the "Delayed-Then-Instant Tooltips with HTML & CSS Alone"

https://master.dev/blog/delayed-then-instant-tooltips-with-html-css-alone/

@chriscoyier I appreciate grid dividers styling using `rule` on the last demo. Nice touch 🫶

#css

I really like this chain of blog posts.

First, Abhishek Jakhar published "Tooltips Need a Delay, and Then They Need to Skip It" with his solution for nicely times tooltips.

https://master.dev/blog/tooltips-need-a-delay-and-then-they-need-to-skip-it/

The @chriscoyier answered with his pure CSS solution on the "Delayed-Then-Instant Tooltips with HTML & CSS Alone"

https://master.dev/blog/delayed-then-instant-tooltips-with-html-css-alone/

@chriscoyier I appreciate grid dividers styling using `rule` on the last demo. Nice touch 🫶

#css

Stupid #CSS question: is there any way to get this "shadow left in place" on scroll effect without any JS? And without any kind of text duplication, of course, the shadow left in place must be a shadow, not a pseudo or another element.

https://codepen.io/thebabydino/pen/YPNbdZm

cc @css @kizu

Stupid #CSS question: is there any way to get this "shadow left in place" on scroll effect without any JS? And without any kind of text duplication, of course, the shadow left in place must be a shadow, not a pseudo or another element.

https://codepen.io/thebabydino/pen/YPNbdZm

cc @css @kizu

What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing “text-stroke”, and More, by @dxnny.fun (@csstricks):

https://css-tricks.com/whats-important-17/?ref=frontenddogma.com

#css #retrospectives

What’s !important #17: Custom Highlight API, CSS Navigation Matching, Fixing “text-stroke”, and More, by @dxnny.fun (@csstricks):

https://css-tricks.com/whats-important-17/?ref=frontenddogma.com

#css #retrospectives

A fun thing about working on an Electron app is I can use stuff like `＠container anchored()`, `attr(x type())`, and `if()` in production 😎 #css

A fun thing about working on an Electron app is I can use stuff like `＠container anchored()`, `attr(x type())`, and `if()` in production 😎 #css

My belated HTML Day contribution: a helpful little bit of CSS for publishing your meows: cat.css

My belated HTML Day contribution: a helpful little bit of CSS for publishing your meows: cat.css

RE: https://mastodon.social/@jaffathecake/117092841356345590

People with *opinions* about #CSS:

If you set a line-height on text that would cause the glyphs to overlap in block text, and you also use `text-box-trim` to trim the block down to exactly fit the text-box, should the browser "trim" away what is effectively negative margins, to make the block bigger?

If you've been using line-height: 1 to create tightly trimmed buttons & now want to switch to using text-box-trim, this could complicate your fallbacks one way or another.
https://github.com/w3c/csswg-drafts/issues/14328

RE: https://mastodon.social/@jaffathecake/117092841356345590

People with *opinions* about #CSS:

If you set a line-height on text that would cause the glyphs to overlap in block text, and you also use `text-box-trim` to trim the block down to exactly fit the text-box, should the browser "trim" away what is effectively negative margins, to make the block bigger?

If you've been using line-height: 1 to create tightly trimmed buttons & now want to switch to using text-box-trim, this could complicate your fallbacks one way or another.
https://github.com/w3c/csswg-drafts/issues/14328

Conférence #ParisWeb : le 24 septembre, @goetter nous apprendra quelles règles typographiques sont (ou seraient) à appliquer dans nos contenus web.

https://www.paris-web.fr/2026/conference/la-typographie-dans-le-web

Programme complet et inscriptions sur notre site : https://www.paris-web.fr/2026

#css #typographie

Conférence #ParisWeb : le 24 septembre, @goetter nous apprendra quelles règles typographiques sont (ou seraient) à appliquer dans nos contenus web.

https://www.paris-web.fr/2026/conference/la-typographie-dans-le-web

Programme complet et inscriptions sur notre site : https://www.paris-web.fr/2026

#css #typographie

CSSが反映されない原因10選
https://qiita.com/nt_matsuda56/items/48143eeaf19f9e358e3a?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #CSS #初心者 #Web制作

【コピペOK】CSSで作るモダンなUIアニメーション集
https://qiita.com/nt_y-maeda112/items/48d124a11623b4f9e7c6?utm_campaign=popular_items&utm_medium=feed&utm_source=popular_items

#qiita #HTML #CSS #初心者 #初心者向け #フロントエンド

Dew Drop Weekly Newsletter 496 - Week Ending August 14, 2026

https://zc.vg/GngZp?m=0

#dewdrop #newsletter #javascript #css #azure #aspnetcore #blazor #cpp #windowsdev #xaml #dotnet #csharp #ai #mcp #python #appdev #dotnetmaui #podcasts #m365 #data #sqlserver #powershell #cli #terminal

Dew Drop Weekly Newsletter 496 - Week Ending August 14, 2026

https://zc.vg/GngZp?m=0

#dewdrop #newsletter #javascript #css #azure #aspnetcore #blazor #cpp #windowsdev #xaml #dotnet #csharp #ai #mcp #python #appdev #dotnetmaui #podcasts #m365 #data #sqlserver #powershell #cli #terminal

Astryx: дизайн-система, которой может пользоваться AI-агент

В прошлой статье про StyleX я разбирал, почему компилируемый CSS выглядит логичным продолжением ветки CSS-in-JS. Одно из главных свойств StyleX для меня — предсказуемость: стили описываются в ограниченной форме, которую можно анализировать ещё до запуска приложения. Это особенно важно в момент, когда код всё чаще пишет не только человек, но и AI-ассистент. Если инструмент допускает любую форму записи стилей, ассистент рано или поздно начнёт пользоваться всей этой свободой: добавлять магические значения, дублировать решения, обходить токены и постепенно размывать дизайн-систему. StyleX сужает пространство для таких ошибок. Теперь Meta открыла Astryx — дизайн-систему, построенную на React и StyleX. На первый взгляд это выглядит как релиз большой библиотеки: больше 170 компонентов, темы, тёмный режим, шаблоны, CLI, всё как мы любим. Но количество компонентов здесь не самое интересное. Astryx стоит рассматривать как следующий шаг после StyleX: если StyleX делает предсказуемыми стили, то Astryx пытается сделать предсказуемой работу с интерфейсом целиком — и для человека, и для AI-агента.

https://habr.com/ru/articles/1070514/

#вебразработка #дизайнсистемы #фронтенд #библиотеки #css #stylex

🔗 Can we make default Tailwind a more accessible choice?
https://spatie.be/blog/can-we-make-default-tailwind-a-more-accessible-choice
#bestpractices #css #tailwind #responsive #accessibility

🔗 Can we make default Tailwind a more accessible choice?
https://spatie.be/blog/can-we-make-default-tailwind-a-more-accessible-choice
#bestpractices #css #tailwind #responsive #accessibility

#Development #Guides
Dark and light modes for emails? · Emails can go dark, but you can’t fully control how https://ilo.im/16fbnb

_____
#DarkMode #LightMode #Emails #EmailClients #Design #EmailDesign #WebDesign #WebDev #Frontend #CSS

#Development #Guides
Dark and light modes for emails? · Emails can go dark, but you can’t fully control how https://ilo.im/16fbnb

_____
#DarkMode #LightMode #Emails #EmailClients #Design #EmailDesign #WebDesign #WebDev #Frontend #CSS

#Development #Techniques
Delayed-then-instant tooltips · How to do it with HTML and CSS alone https://ilo.im/16fbk7

_____
#ModernCSS #Tooltips #Popovers #AnchorPositioning #Browsers #WebDev #Frontend #HTML #CSS #JavaScript

#Development #Techniques
Delayed-then-instant tooltips · How to do it with HTML and CSS alone https://ilo.im/16fbk7

_____
#ModernCSS #Tooltips #Popovers #AnchorPositioning #Browsers #WebDev #Frontend #HTML #CSS #JavaScript

PayU is hiring Associate Software Engineer - PHP Developer

🔧 #php #javascript #angular #laravel #react #aws #azure #css #html #mysql
🌎 Gurgaon, India
⏰ Full-time
🏢 PayU

Job details https://jobsfordevelopers.com/jobs/associate-software-engineer-php-developer-at-payu-com-oct-3-2024-71fa25?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

PayU is hiring Associate Software Engineer - PHP Developer

🔧 #php #javascript #angular #laravel #react #aws #azure #css #html #mysql
🌎 Gurgaon, India
⏰ Full-time
🏢 PayU

Job details https://jobsfordevelopers.com/jobs/associate-software-engineer-php-developer-at-payu-com-oct-3-2024-71fa25?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

5 CSS Properties You Should Know for Better Text Designs, by @preethisam.bsky.social (@frontendmasters.com):

https://master.dev/blog/typographic-css-tricks/?ref=frontenddogma.com

#css #design

5 CSS Properties You Should Know for Better Text Designs, by @preethisam.bsky.social (@frontendmasters.com):

https://master.dev/blog/typographic-css-tricks/?ref=frontenddogma.com

#css #design

If I wanted to ship some #CSS in an #11ty / #BuildAwesome plugin, how would I do that?

Just include the CSS file in the published plugin, and document different patterns for including it, or should the plugin autoload the CSS somehow? 🤔

Anyone have an example?

#AskFedi #IndieDev

If I wanted to ship some #CSS in an #11ty / #BuildAwesome plugin, how would I do that?

Just include the CSS file in the published plugin, and document different patterns for including it, or should the plugin autoload the CSS somehow? 🤔

Anyone have an example?

#AskFedi #IndieDev

Over the last few days I made some improvements to my pet DIY IoT project. I haven’t worked on it for a while

Most useful to me, some colors for the data table overview!

I can’t believe CSS still doesn’t have an easy way to ensure that text stays readable regardless the background… Here I resorted to a shadow but that made the actual font thin and brittle, so I made it bold.

And for some reason the CSS feature that was meant to help, doesn’t work on LibreWolf?

#DiyAirQualityMonitor #css

Over the last few days I made some improvements to my pet DIY IoT project. I haven’t worked on it for a while

Most useful to me, some colors for the data table overview!

I can’t believe CSS still doesn’t have an easy way to ensure that text stays readable regardless the background… Here I resorted to a shadow but that made the actual font thin and brittle, so I made it bold.

And for some reason the CSS feature that was meant to help, doesn’t work on LibreWolf?

#DiyAirQualityMonitor #css

Some late-night HTML-ing and CSS-ing. Added some "about" text to my website: https://www.yevi.org and a test page here: https://www.yevi.org/test

#11ty #personalwebsite #html #css #staticsite

Some late-night HTML-ing and CSS-ing. Added some "about" text to my website: https://www.yevi.org and a test page here: https://www.yevi.org/test

#11ty #personalwebsite #html #css #staticsite

Datatype - variable font that turns text into charts

Datatype is an OpenType variable font that turns simple text expressions into inline charts. No JavaScript, no images, no rendering library — just type the syntax and Datatype's ligature substitution does the rest. (…)franktisellano.github.io

Ich bin neulich via Stefan Grunds Blog darauf gestossen und hatte mir das weggelegt um mal damit rumzuspielen.
Eben habe ich eine News gelesen, wonach der momentane SAP Chef so ziemlich genau das am Tag verdient bekommt, wie unsereiner im Jahr.

Das ist die Gelegenheit, mal den Chart Font auszuprobieren:

Hm, ok. Natürlich geht das nur mit recht simplen Sachen. Und durch die Limitierung, dass man Werte von 0-100 vergeben kann, wird es schwierig, sobald ein Wert kleiner als 1 ist -- in meinem Beispiel bräuchte ich eigentlich 0.3 zu 100 - das klappt nicht. Und bei größeren font-sizes ragt das Chart aus den umgebenden Elementen raus und muss dann mit css ein wenig rumgeschubbst werden.
Aber trotzdem, ich finds cool.

Datatype - variable font that turns text into charts

Datatype is an OpenType variable font that turns simple text expressions into inline charts. No JavaScript, no images, no rendering library — just type the syntax and Datatype's ligature substitution does the rest. (…)franktisellano.github.io

Ich bin neulich via Stefan Grunds Blog darauf gestossen und hatte mir das weggelegt um mal damit rumzuspielen.
Eben habe ich eine News gelesen, wonach der momentane SAP Chef so ziemlich genau das am Tag verdient bekommt, wie unsereiner im Jahr.

Das ist die Gelegenheit, mal den Chart Font auszuprobieren:

Hm, ok. Natürlich geht das nur mit recht simplen Sachen. Und durch die Limitierung, dass man Werte von 0-100 vergeben kann, wird es schwierig, sobald ein Wert kleiner als 1 ist -- in meinem Beispiel bräuchte ich eigentlich 0.3 zu 100 - das klappt nicht. Und bei größeren font-sizes ragt das Chart aus den umgebenden Elementen raus und muss dann mit css ein wenig rumgeschubbst werden.
Aber trotzdem, ich finds cool.

KnowBe4 is hiring Senior Software Engineer

🔧 #ruby #typescript #react #rubyonrails #serverless #vue #graphql #aws #cicd #css #mysql #postgresql #redis #awss3 #tailwind #terraform #seniorengineer
🌎 Sao Paulo, Brazil
⏰ Full-time
🏢 KnowBe4

Job details https://jobsfordevelopers.com/jobs/senior-software-engineer-at-knowbe-4-com-jul-24-2026-33b0a8?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

KnowBe4 is hiring Senior Software Engineer

🔧 #ruby #typescript #react #rubyonrails #serverless #vue #graphql #aws #cicd #css #mysql #postgresql #redis #awss3 #tailwind #terraform #seniorengineer
🌎 Sao Paulo, Brazil
⏰ Full-time
🏢 KnowBe4

Job details https://jobsfordevelopers.com/jobs/senior-software-engineer-at-knowbe-4-com-jul-24-2026-33b0a8?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

Reminder That “system-ui” Is Well Supported, When You Use It on macOS You Get San Francisco Which Is a Variable Font, Which Is Fun, and the Fallbacks Are Pretty Good, by @chriscoyier (@frontendmasters.com):

https://master.dev/blog/system-ui-san-francisco-fun/?ref=frontenddogma.com

#css #fonts #unixlike #apple

For everyone supporting me on Ko-fi and Patreon, a little pure #CSS #3D treat.

❇️ https://ko-fi.com/post/tiles-on-icosahedron-R3F224ZYR4

❇️ https://www.patreon.com/anatudor/posts/tiles-on-166570091

#cssGrid #code #coding #frontend #jade #sass #Maths #geometry #cssLayout #cssVariables #interaction #web #dev #webDev #webDevelopment