I like the idea that CSS must have "graceful degradation" and "do no harm" to the HTML it's affecting.
Although I would argue my CSS skills harm it quite a bit.
Created a simple HTML example of a "chaotic CSS borders" https://chaotic-border-css.netlify.app/ #css #html
I've updated my designs page (https://chriskirknielsen.com/designs/) to use #CSS view transitions instead of a good ol' FLIP animation. Works well in all 3 major browsers in their recent releases. Except… in Chrome it feels sluggish, but if I turn on a performance recording, it's smooth as butter (see the FPS counter via stats.js). Is this just me? Am I doing something wrong?
@simon_brooke chastened. Thanks
@urlyman We've all been there. In more than thirty years of #WebDesign I've written some horrible things myself. I now deliberately separate layout styling and colour styling into separate files, to simplify reskinning colour. But really, if you're using more than a dozen colours on a page, WHY?
#CSS should be simple!
Esther Payne :bisexual_flag:
boosted
I visited a popular #OpenSource documentation site this morning, and the glare almost blinded me.
Folk, in this day and age, if you run a website, there is NO EXCUSE for not implementing `@media: prefers-color-scheme(dark)`
But, I thought, this is open source! I can submit a pull request to fix this!
Reader, there are ONE HUNDRED AND FORTY-FOUR distinct colours specified in three different syntaxes.
I visited a popular #OpenSource documentation site this morning, and the glare almost blinded me.
Folk, in this day and age, if you run a website, there is NO EXCUSE for not implementing `@media: prefers-color-scheme(dark)`
But, I thought, this is open source! I can submit a pull request to fix this!
Reader, there are ONE HUNDRED AND FORTY-FOUR distinct colours specified in three different syntaxes.
I don’t know what a media query is.
I am hardly an expert at this, however I did the free code camp responsive web design course during lockdown in 2020/21.
IIRC a media query is used to take the screen size and apply specifc attributes (such as font size) according to the size (in pixels) of the screen.
https://www.w3schools.com/css/css3_mediaqueries.asp
Clearly a desktop / laptop screen is a lot bigger than a tablet or mobile.
It should be possible to resize images, much easier with svg as they are meant to scale.
Hope this helps
#html
#css
#mediaquery
#webdesign
Hopefully someone can help with this.
A CSS-only elastic hover effect, because why not?
https://css-tip.com/elastic-hover/
A chrome-only experiment using shape(), sibling-index(), linear(), etc.
Jen Simmons
boosted
When Will CSS Grid Lanes Arrive? How Long Until We Can Use It?, by @jensimmons ( @webkit):
https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/
fedicat
boosted
🤔 "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
🤔 "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
Roni Rolle Laukkarinen
boosted
Been to https://cssstats.com/ before but looks liked they redid some things. "Visualize your cascading style sheets" with leaderboards and "most popular colors".
If you are a #CSS nerd - def. something for you.
Been to https://cssstats.com/ before but looks liked they redid some things. "Visualize your cascading style sheets" with leaderboards and "most popular colors".
If you are a #CSS nerd - def. something for you.
Chip Butty
and 1 other
boosted
👋 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!
👋 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!
scaglio
boosted
Hi Mastodon 🦣 can you help me out?
If you can test in actual Safari, what do you see here? Is it crimson animated text like I see in Chrome/ Firefox?
https://codepen.io/thebabydino/pen/gbMzpjz
Or is it all black on black like I see in Epiphany? 🙀
If you cannot test yourself, boosts appreciated. 🙏
Thanks!
Hi Mastodon 🦣 can you help me out?
If you can test in actual Safari, what do you see here? Is it crimson animated text like I see in Chrome/ Firefox?
https://codepen.io/thebabydino/pen/gbMzpjz
Or is it all black on black like I see in Epiphany? 🙀
If you cannot test yourself, boosts appreciated. 🙏
Thanks!
Gjalt-Jorn Peters
boosted
A cat. On the moon. In a spacesuit.
Built with HTML + CSS only 🚀🐱 (reusing some previously coded parts)
Source code on @codepen: https://codepen.io/alvaromontoro/pen/MYeVvgr
alcinnz
boosted
I'm looking into switching to the OKLCH colour space and using that going forward.
I think I've been a bit reluctant because it feels like I've only just started using HSL! 😅 I will likely still have to for a while too, for design tools like Affinity.
#CSS Fun! 🎨
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
