5t3ph, 8 months ago to CSS

What practical uses of #CSS container queries have you seen or created that aren't cards?

SaraSoueidan, 9 months ago to CSS

The State of CSS 2023 survey results are live!

https://2023.stateofcss.com/en-US/

#CSS

andy, 4 months ago to CSS

Forget nesting, the biggest win for “DX” that #CSS could do is // comments IMO.

It’s the only thing I miss about Sass these days.

rolle, 8 months ago (edited 8 months ago) to opensource

Mastodon Bird UI 1.7.9 is now released! :neon_skull:

Mastodon 4.2.0, 4.3.0-alpha and nightlies supported.

Changelog:

• Improve the visibility of column header borders in advanced view
• Fix border column-header color also in single column mode
• Ultra accessible theme improvements (Readme snippet)
• Add explore__search-results to transparent background color scope
• Add search-results__section__header to color scopes
• Fix collapsible border in tab header
• Make it easier to edit the gap of column-links by splitting the variables in two #86 (thanks @trankten!)
• Add dark banner styles for account-memorial-banner (thanks @DismalShadowX!), follow-request-banner and moved-account-banners

Live demo (single column layout only): https://mementomori.social

Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui

#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin #BirdUI

5t3ph, 6 months ago to CSS

Excited for the 12 Days of Web articles to hit my inbox for scheduling 🤩

Don't forget to subscribe to updates or get the RSS (/feed)!

#CSS #HTML #JS

https://12daysofweb.dev

teknomagic, 5 months ago to webdev Spanish

I think mastodon is the best place to ask this: what are some #html and #css books that you like and/or would recommend?
Thanks in advance

jlengstorf, 7 months ago to CSS

pure CSS animated gradient borders!

how it works:

• @property — so custom property values interpolate for animation
• conic-gradient() — so the gradient can “spin”
• OKLCH — far better-looking gradients

code: https://codepen.io/jlengstorf/pen/WNPGMJo

thanks to @chriscoyier, @leaverou, and Temani Afif for making me aware of the different pieces that made this demo come together 💜

#css #webdev #programming #frontend

matthiasott, 7 months ago to CSS

Ohhh! 😯

Look at what @matuzo just did!

Removing list styles without affecting semantics.
#css #a11y
https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics

stvfrnzl, 6 months ago to webdev

"Recently I decided to stop using the word semantics. Instead I talk about the UX of HTML. And all of a sudden my students are not allergic to HTML anymore but really interested. Instead of explaining the meaning of a certain element, I show them what it does."

https://www.htmhell.dev/adventcalendar/2023/1/

The first door of the #HTMHell calendar has been opened and @vasilis approach really resonates with me. I'm a visual learner, and I also like to do stuff instead of reading about it.

#html #css #ux

rachelandrew, 9 months ago to CSS

Chrome 117 beta is out today. It includes subgrid for CSS Grid. A feature I have felt was important for CSS grid layout for at least (checks actual notes/old blog posts) 8 years, and it's heading for interop status.

There's also lots of other good stuff in this beta—check it out https://developer.chrome.com/blog/chrome-117-beta/ #css

aral, 6 months ago to CSS

The singularity will not be properly centred.

#css

sdsk, 1 year ago to webdev Czech

Od kolegů v práci jsem získal prestižní ocenění za svou celoživotní práci s #css

Printed by @stepan

tylersticka, 5 months ago to CSS

Attempting to manifest more CSS goodness in 2024 with a shiny new wish list 🪄📄 https://cloudfour.com/thinks/tylers-css-wish-list-for-2024/

#CSS #WebDesign #WebDev

5t3ph, 8 months ago to CSS

✨ Turn on document.designMode for in-browser spell-checking

Design mode essentially turns every element into a contenteditable region, which enables spelling and grammar checking and is also useful for experimenting with text changes

#CSS #HTML #frontend

mrtrimble, 11 months ago to CSS

Announcing a new project that is waaay outside my comfort zone, but I feel compelled to do:

CSS Harrisburg - A new web development community for the central Pennsylvania region!

Find out more information on this announcement post:
https://ryantrimble.com/blog/introducing-css-harrisburg/

Subscribe to the newsletter for updates on the group:
https://cssharrisburg.com/

#CSS

sonny, 8 months ago (edited 8 months ago) to linux

Workbench 45 is available on Flathub 🎉

https://flathub.org/apps/re.sonny.Workbench

Ever wanted to try or discover GNOME dev? Now is the perfect time. :gnome:

This is a massive release with many new features such as Rust support, 50 new Library demos (Map, Spelling, Camera, …), multi-windows, offline documentation viewer etc.

See the full release announcement https://github.com/sonnyp/Workbench/releases/tag/v45.0

#Linux #development #GTK #GNOME #Rust #rustlang #CSS #Vala #JavaScript

Thanks to all contributors (see Credits) and enjoy!

mia, 10 months ago to CSS

There have been a number of articles lately about highlight and backdrop pseudo-elements not inheriting custom properties from the root element.

In both cases, the working group is fixing the #css specs. Both highlight and backdrop elements should be able to access custom properties defined on root/html.

Hopefully browsers will get that fixed as well, and you can go back to ignoring those articles.

rolle, 8 months ago to opensource

Mastodon Bird UI 1.7.5 is now released! :neon_skull:

This release adds support for Mastodon 4.2.0.

Changelog:

• Recognize mispelled GitHub and add an icon
• Recognize empty field and remove pipe
• Hover effect missing in menus, Fixes #79 (Thanks @Roboron3042!)
• Profile view on mobile leaves kebab menu out when the localized "Unfollow" label is longer, Fixes #87 (Thanks @ikke!)
• Support for Mastodon 4.2.0

Release and the most notable changes with screenshots: https://github.com/ronilaukkarinen/mastodon-bird-ui/releases/tag/1.7.5

Live demo (single column layout only): https://mementomori.social

Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui

#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin #BirdUI

huijing, 11 months ago to webdev

i had opportunity to help out with the #StateOfCSS survey this year 🤓
we want to hear from anyone who writes CSS!
#css #webdev

https://chenhuijing.com/blog/state-of-css-survey-2023-is-live
take survey here: https://survey.devographics.com/en-US/survey/state-of-css/2023

rolle, 8 months ago to jpmusic

Mastodon Bird UI 1.7.6 is now released! :neon_skull:

Works on Mastodon 4.2.0 and nightlies.

Changelog:

• Fix the x position in recent searches
• Introduce new boost micro-interaction, Fixes #81 #74
• Fix padding in multiple column view
• Fix boost icon
• Add new boost interactions to advanced web interface
• Use i modifier to reduce attr selector repetition #84 (thanks @valtlai!)
• Update --icon-boost-notification-wrapper to match new boost icon
• Fix light theme icon colors

Release and the most notable changes: https://github.com/ronilaukkarinen/mastodon-bird-ui/releases/tag/1.7.6

Live demo (single column layout only): https://mementomori.social

Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui

#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin #BirdUI

rolle, 1 year ago (edited 1 year ago) to opensource

Mastodon Bird UI v1.5.7 released! :neon_skull:

Changelog:

• Fix icon bubble position on single column layout
• Fix missing px unit
• Fix typo on selector (thanks @tribela!)
• Update README with instructions on how to set the theme optional (thanks @mstdn and @mookie!)
  Live demo (single column layout only): https://mementomori.social

Source code and installation instructions: https://github.com/ronilaukkarinen/mastodon-bird-ui

#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin

sonny, 8 months ago to CSS

Did you know you can use CSS Gradients in GTK? :gnome:

Urtsi Santsi submitted an awesome demo 🎩

It will ship in Workbench 45.1 🛠️

You can even animate them with CSS Animations.

#GTK #CSS #GNOME #development #programming

A screenshot of the second part of the demo. It's an interactive gradient designer with controls to change the type, angle and colors. There are also 2 links to consult documentation. "Using CSS gradients" and "Specifications"

pawelgrzybek, 1 year ago to webdev

Safari is packed with new CSS features, and more are coming in the next release. Just check out the "What's New in CSS" WWDC23 session by @jensimmons to find out more.

https://developer.apple.com/videos/play/wwdc2023/10121/

I am super excited about the masonry layout because "layout really belongs in CSS". I published a post about it some time ago, have a look!

https://pawelgrzybek.com/native-css-masonry-layout/

Also, I'm excited about lh and rlh units. I've also written a post about them too! 🙈

https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/

#css #safari #wwdc23

charlesroper, 1 year ago to webdev

Some #CSS holy grail kung-fu:

https://m.youtube.com/watch?v=B_n4YONte5A

The delight on Kevin’s face as he shares this is gold. Please pass this liberally among your front end friends – they will thank you for it.

kizu, 8 months ago to CSS

I highly recommend going and 👍 this #interop2024 issue by @scott — https://github.com/web-platform-tests/interop/issues/513

The ability to remove units when doing calculations in #CSS will be invaluable and has been present in the specs for quite some time, but no browser has implemented it yet.

I stumble upon its absence all the time, and the addition of this to CSS will unlock so many things!