@CSSence@mas.to
@CSSence@mas.to avatar

CSSence

@CSSence@mas.to

#CSS enthusiast & #A11Y advocate. Makes websites and design systems. Works for https://george-labs.com in Vienna, AT.

This profile is from a federated server and may be incomplete. Browse more on the original instance.

CSSence, to CSS
@CSSence@mas.to avatar

#CSS Basics: The flow-root display value.
https://cssence.com/2024/display-flow-root/

CSSence,
@CSSence@mas.to avatar

@iamdtms (As I wrote,) I rarely use floats these days.

Luckily, today floats are only needed for their original purpose, and no longer have to do the heavy layout lifting.

CSSence,
@CSSence@mas.to avatar

@iamdtms Good point, I just checked, you‘re right. Browser support for initial-letter hasn’t improved since I wrote https://cssence.com/2023/drop-caps/

CSSence, to CSS
@CSSence@mas.to avatar

I guess you know that the new range syntax allows media queries to be more concise. But IMO this isn’t even the best part. Let me explain:
https://cssence.com/2024/superior-range-syntax/

Also, if you ever wanted to do music selection based on viewport size 🤨, this article is for you.

#CSS #Viewport #MediaQueries

CSSence, to Blog
@CSSence@mas.to avatar

If you want to give your site a fresh coat of paint (and never get to it), or if you are “redesigning in the open” (and never get to it), then I’d like to have a word with you.

To everyone else, I just wanted to let you know that my site now has a Links section. Again.

https://cssence.com/2024/redesigning-in-the-open/

#blog #design #redesign

CSSence,
@CSSence@mas.to avatar

If you find the distinction between Notes and Links useful, you may thank @nhoizey, who talked me into it a month ago, sort of.
https://cssence.com/2024/links-worth-sharing/

CSSence, to CSS
@CSSence@mas.to avatar

Launching two blog posts on the same day is not what I usually do. Yesterday has been an exception, but at least I delayed the announcement of this one: For those who haven’t read it already, …

… this is level 8 of
»Six levels of dark mode«
https://cssence.com/2024/color-scheme-switcher/

CSSence,
@CSSence@mas.to avatar

I only found out last night that @sarajw (sry for dragging you into this one too 😬) has written an in-depth intro to color-scheme on her site:
https://sarajoy.dev/blog/color-scheme/

Keep reading until the end, she added noteworthy “Further reading” material to her article.

CSSence, to random
@CSSence@mas.to avatar

On this year’s CSS Naked Day, I saw a lot of sites without stylesheets. But also without dark mode. @sarajw's website and my own have been the exception. So I was wondering, maybe it’s time to talk about “the six (or more) levels of dark mode”.
https://cssence.com/2024/six-levels-of-dark-mode/

CSSence,
@CSSence@mas.to avatar

@sarajw Good to hear. Also, seems like we’ve been visiting different sites. 😅

Would a CSS Naked Day webring make sense? 🤔

CSSence,
@CSSence@mas.to avatar

@pepelsbey Yes, hiding it from printers was the idea, I would assume they are anyhow taken care of in either a theme-independent core stylesheet, or a dedicated print stylesheet.

So I guess I wanted to be on the safe side, #DarkMode for printers could waste a lot of ink. 😉

CSSence,
@CSSence@mas.to avatar

@pepelsbey Interesting. I also ran a test: I opened my media queries test page¹, in the print preview prefers-color-scheme always reports light. Which makes sense. And I guess that's also the cause for your result. Good to know. (I've only been able to test Firefox and Chromium.)

¹ https://cssence.com/2024/media-queries-including-level-5/

zachleat, to random
@zachleat@zachleat.com avatar

I wonder if y’all can help me out—I’m trying to collect a list of web development communities (not related to any one specific tool or framework), can you reply with your favorites?

(if you don’t have a favorite I will also accept communities you’re familiar with 😅)

CSSence,
@CSSence@mas.to avatar

@sarajw
Are you thinking of selfhtml.org?
/cc @zachleat

That’s how I learned back in the day.
https://cssence.com/2023/view-source/

CSSence, to random
@CSSence@mas.to avatar

Thanks again @kizu for pointing me to the solution to my aspect-ratio issue.

What's weird is that even on my site I solved the issue by setting the height to auto, which I did last week(!), and I already forgot. I don’t know what tomfoolery was in play here.

Anyhow, the revised blog post is online. I got lucky this time, as I didn’t need to delete the whole post. Even the revision can use the original title, »aspect-ratio gotcha!« Gotcha indeed, it got me real good. 😅

https://cssence.com/2024/aspect-ratio-gotcha/

CSSence, to CSS
@CSSence@mas.to avatar

Shoutout to @dan, https://modernfontstacks.com is high up in my list of most favorite websites ever. And oh so helpful.

nhoizey, to random French
@nhoizey@mamot.fr avatar

🔗 “Links Worth Sharing” by @matthiasott

#IndieWeb

⚓️ https://nicolas-hoizey.com/links/2024/03/15/links-worth-sharing/

CSSence,
@CSSence@mas.to avatar

@nhoizey @matthiasott Many years ago, my Notes¹ section (back then unfavorably called Gossip) distinguished between Opinions and Bookmarks. The latter indicated the primary content of a note was a link. Somewhere along the line I've merged the two subsections. Having read “Links Worth Sharing” made me wonder if I should bring bookmarks back as “Links”.

¹ https://cssence.com/notes/
#IndieWeb

CSSence,
@CSSence@mas.to avatar

@nhoizey
https://github.com/cssence/cssence.com/issues/4
😬

CSSence, to RSS
@CSSence@mas.to avatar

> But there is something else which probably everyone with a personal website should do: adding an RSS feed.

I’m late to the party, but better late than never.

Shoutout to @simevidas for creating a Github issue, and @stefan for getting in touch via e-mail, i.e. two ways of letting me know they’d like to subscribe.

Well, now they can. And you can too:
https://cssence.com/rss/

PS. Am I the first to offer time-based subscriptions?

CSSence,
@CSSence@mas.to avatar

Also, another shoutout to @matthiasott, the quote in the previous toot is from his “We ❤️ RSS” blog post:
https://matthiasott.com/notes/we-love-rss

I, for one, also ❤️ RSS.

(Seriously, I must have been living under a rock when it comes to #RSS. After installing the first feed reader I found in Linux Mint’s Software Manager and adding a few feeds, I concluded this is amazingly convenient.)

CSSence, to CSS
@CSSence@mas.to avatar

Thanks to @belldotbz, I learned that the lh unit has cross-browser support:
https://piccalil.li/blog/lh-units-are-cool/

#CSS

davatron5000, to random
@davatron5000@mastodon.social avatar

Join the fight for PWAs

https://letter.open-web-advocacy.org/

CSSence,
@CSSence@mas.to avatar

Signed.

https://letter.open-web-advocacy.org/

CSSence, to CSS
@CSSence@mas.to avatar

Hello Firefox users, can you confirm (or provide other information to) a #CSS text-overflow issue I’ve encountered. Thanks in advance.
https://cssence.com/2024/firefox-text-overflow-issue/

CSSence, to CSS
@CSSence@mas.to avatar

Quick reminder: accent-color is still no custom property.
https://cssence.com/2024/accent-color-is-no-css-variable-revisited/

Shoutout to @mia for inspiring me to write this follow-up article.
#CSS #WebDevelopment

matthiasott, to CSS
@matthiasott@mastodon.social avatar

min() and max() are really useful! #CSS #servicetoot

CSSence,
@CSSence@mas.to avatar

@matthiasott
> Seemingly unimportant, but only at first glance.
—https://cssence.com/2024/is-css-alive/
🙂

CSSence, to CSS
@CSSence@mas.to avatar

In 2019, I’ve published the first “Animating Emojis” blog post, and along the way it became a pet project inside the pet project that is my website. The 5th Edition just went live, come celebrate with me:
https://cssence.com/2023/animating-emojis/
#CSS #Emoji

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • megavids
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • provamag3
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • anitta
  • Leos
  • tester
  • JUstTest
  • All magazines
    •