#stylesheets — Public Fediverse posts

@dillo maybe consider:

Absolute URLs are exclusively for hyperlinks to another webpage.

Webpages should have been restricted to load files only by relative URLs & never load any file by absolute URLs.

Also, per website style design was a terrible UX and accessibility mistake

#Stylesheets should've been something you install in your own browser such that "the web" would have the uniform look and feel you prefer.

Just a thought

#Development #Findings
The CSS Selection 2026 · The state of real-world CSS usage https://ilo.im/16afiy

_____
#Stylesheets #Metrics #Websites #Content #Media #Fonts #Browsers #WebDev #Frontend #CSS

Hmm, is there a way to use sass combinators with attribute string concatenation for the value?

Here are my outputs:

data-class="Form-status--complete"
data-class="Form-status--in-progress"
data-class="Form-status--expired"

I want to do something like this:

    [data-class='Form'] {
        &-status {
            &--complete {
                color: $c-state-orange;
            }

            &--in-progress {
                color: $notice-icon-pending;
            }

            &--expired {
                color: $c-state-gray;
            }
        }
    }

Of course that doesn't work. But I am not sure if I can avoid repeating myself

I am assuming you can't just open the square brackets and wrap them around your logic like:

[data-class='Form {
   &-status {
   ...
}']

#css #sass #scss #stylesheets #html #FrontEnd #FrontEndHelp #WebDev

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#CSS folk, is there a way to check "@supports" for the "@property" declarer?

I tried "@supports(initial-value: *)" but that doesn't seem to fly, at least in #LibreWolf, although the rule itself is supported 🤔

#HelpWanted #Stylesheets #BoostsAppreciated

#Development #Approaches
My CSS selector strategy · Think of it as a “progressive narrowing of scope.” https://ilo.im/168bgo

_____
#Stylesheets #CssSelectors #WebDev #Frontend #CSS

#Development #Approaches
My CSS selector strategy · Think of it as a “progressive narrowing of scope.” https://ilo.im/168bgo

_____
#Stylesheets #CssSelectors #WebDev #Frontend #CSS

#Development #Approaches
My CSS selector strategy · Think of it as a “progressive narrowing of scope.” https://ilo.im/168bgo

_____
#Stylesheets #CssSelectors #WebDev #Frontend #CSS

#Development #Approaches
My CSS selector strategy · Think of it as a “progressive narrowing of scope.” https://ilo.im/168bgo

_____
#Stylesheets #CssSelectors #WebDev #Frontend #CSS

#Development #Proposals
Zombie styles · Do your CSS files also contain any zombies? https://ilo.im/1687os

_____
#Terminology #Stylesheets #CssDeclarations #CssSpecificity #UiComponents #Frameworks #WebDev #Frontend #HTML #CSS

#Development #Proposals
Zombie styles · Do your CSS files also contain any zombies? https://ilo.im/1687os

_____
#Terminology #Stylesheets #CssDeclarations #CssSpecificity #UiComponents #Frameworks #WebDev #Frontend #HTML #CSS

#Development #Proposals
Zombie styles · Do your CSS files also contain any zombies? https://ilo.im/1687os

_____
#Terminology #Stylesheets #CssDeclarations #CssSpecificity #UiComponents #Frameworks #WebDev #Frontend #HTML #CSS

#Development #Proposals
Zombie styles · Do your CSS files also contain any zombies? https://ilo.im/1687os

_____
#Terminology #Stylesheets #CssDeclarations #CssSpecificity #UiComponents #Frameworks #WebDev #Frontend #HTML #CSS

Also:

Read-only browsers killed what the web could've been.

Making the web server/client while having to rent a domain name, a server, & buy a certificate, etc to run a server made the web stillborn.

Per website style design was a terrible UX and accessibility mistake

#Stylesheets should've been something you install in your own browser such that "the web" would have the uniform look and feel you prefer.

#UnpopularOpinion

As Mozilla fumbles #Firefox, let's reflect on what we'd lose if this unique browser + engine dies.

How can I get a list of #HTTP, #HTML and #CSS features that are only supported by Firefox / #Gecko? Does caniuse.com or MDN have this? Wikipedia?

Only Firefox supports assigning #stylesheets through HTTP headers:
https://meiert.com/blog/prefer-http-headers/

Only Firefox supports alternate stylesheets: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/alternate_stylesheet

Put these facts together, and you can make a secret stylesheet only for Firefox users.

#Editors, download my example #StyleSheets for #academic #editing, #medical editing, and #fiction editing. If you create similar style sheets for each of your #editing projects, you’ll find it easier to maintain #consistency throughout each #manuscript. https://www.kokedit.com/library_stylesheets.php #QuadEditors

#Development #Insights
CSS wants to be a system · It doesn’t come with one out of the box https://ilo.im/161ork

_____
#Programming #CSS #StyleSheets #ProgressiveEnhancement #Browser #WebDev #Frontend

#Development #Approaches
CSS @import is cool, actually · It delivers some useful features a ‘link’ doesn’t offer https://ilo.im/161egj

_____
#Stylesheets #Browser #WebPerf #WebDev #Frontend #CSS #FeatureQuery #MediaQuery

CSS

This page lists some CSS resources I find of interest, most notably minimalist layout frameworks.(...)

#css #design #html #minimalism #stylesheets #web

https://taoofmac.com/space/dev/css

Recently there was an article on HackerNews about CSS Print styles. Here's mine; included in the page with `<link rel="stylesheet" href="/print.css" media="print" />` so it won't slow down the page when not printing.

#css #webDev #web #style #stylesheets #frontend #html

Feels like we need a few years for the latest CSS to settle in and become part of regular usage. Even if you *know* about the stuff, it takes time to build the muscle memory around it.

Thinking of :has, scope, layer, colors, scrolling stuff, popovers, container units, etc.

#css #webDev #stylesheets #frontend #webDevelopment #web

Seeing a few folks say "FOUC" when they mean "layout shift".

FOUC: When content paints before its CSS has loaded.

It results in a layout shift, but not all layout shifts are because of FOUC (in fact, FOUC is pretty rare these days).

#webDev #javaScript #styles #css #stylesheets #fouc #lcp #webvitals #webDevelopment

Coming on 30 years writing CSS and I still don't know why or when margin/padding collapses.

#webDev #css #frontend #styles #stylesheets #web

Using #CSS class/id selectors is a code-smell.

Your #stylesheets should be mainly element selectors scoped to #shadowDOM.

#webDev #javaScript #webComponents #style #tech #web

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

Eh? Did I miss something? Or did I just forget that #Safari still has User #StyleSheets?

It is a delight creating and updating #StyleSheets for #books and other projects I #edit. Style sheets help ensure consistency. We #editors want #readers focusing on #authors' messages, not being distracted by inconsistent use of words and names. http://www.kokedit.com/library_stylesheets.php #Bookstodon

Explaining concept of #website #stylesheets to 95-year old.
"You write a letter and make headings red, and bold text brown. In letter nr. 2 you want the same, in a 3rd one too. Finding the exact same colours is tricky. What if you have a notebook where letters could find the colours? Useful, right? That notebook is your stylesheet."
They didn't understand.
"Okay, suppose you're baking cakes. Each cake, no matter the ingredients, should be the same shape. The mould is your stylesheet."
All clear!

Experimenting with loading all the main styles as adopted #stylesheets. This works rather well for my basic #webcomponents setup; I don't perceive any performance loss. And as I use these styles in the web components, I can reuse the stylesheets and benefit from the #browsers cashing across light and shadow dom.
This is so effective I'm considering this in other projects. But, seriously, why haven't I seen this before? I must be missing something.

Updated my Mastodon (glitch-soc) tweaks user-script (which is currently just CSS tweaks) a bit to have a different fallback font as Verdana was causing issues with combining glyph composition. (See this thread for some debugging of that.)

Tweaks included:

• Increase the width of the first and last column so there's more space for the text and media of your home timeline, and the expanded posts
• Increase size of emoji / emotes when you hover over them, making it easier to see what they are supposed to represent
• Change the font to Optima Nova LT Pro, Atkinson Hyperlegible, Roboto, Arial, or a sans-serif font.
• Add a small purple bar above images that come without status content text, so you have some easy-to-click-on area to expand the post.

#Mastodon #GlitchSoc #MastoDev #userStyles #userScripts #FiXatoCodes #coding #CSS #stylesheets #Unicode #FontComposition