#css

#Development #Introductions
CSS Relative colors · Where the new CSS feature comes in handy https://ilo.im/15xak4

_____
#WebDev #Frontend #CSS #Accessibility #ColorSpace #Color

Lorsqu'on ouvre un URL du type "file://", la liste des fichiers du répertoire est affichée, avec le nom de chaque fichier, sa taille et sa date de dernière modification.
Pour éviter ça, il suffit de créer un fichier userContent.css dans le répertoire chrome, s'il n'est pas présent, le créer aussi.
Pour trouver l’emplacement du dossier, il faut aller dans le profil #Firefox, tapez ceci : about:support dans la barre d'adresse.
Il y a le code ici 👇
https://forums.mozfr.org/viewtopic.php?t=124912

#CSS #Firefox #OpenSource

Ce dernier 👇
https://support.mozilla.org/en-US/questions/1224042
Ne fonctionne pas chez-moi.

Kudos to Jacob Padilla for elegantly explaining, with interactive examples, an approach to simple responsive text sizing in CSS: https://jacobpadilla.com/articles/Responsive-Font-Sizing-in-CSS #typography #WebDesign #CSS

If there are people who want to re-experience the frustrations of #CSS-development when there were multiple browsers with each their own way of doing it... Try #gtk3 !

Had an idea last night about how you could (ab)use the details element to show a truncated line of text, and expand it to its full contents thanks to a little CSS, and no JS. I'm not sure how to best set its semantics though, since expanding does nothing (?) to change the accessible content in a screen reader, but that's not the only time semantics matter. And perhaps long strings shouldn't be exposed by default? Likely a bad idea, but fun to play with! 🫠

https://codepen.io/chriskirknielsen/pen/GRzwQzq

#CSS #a11y

#Mastodon Web, c'est un champion !

Mais pas pour le #css d'impression en tout cas !

🤡​ 😂​ :ablobcool:​

#Design #Launches
Animotion · A no-code tool to craft polished CSS animations visually https://ilo.im/15x6xw

_____
#Development #Animation #KeyframeEditor #UxDesign #UiDesign #WebDesign #WebDev #Frontend #CSS

Holy mackerel! When did we get so many CSS pseudo-classes? I'll have look at a lot of them in the near :future

#css

🎨 CSS Pattern!

Demo: https://codepen.io/t_afif/full/zYeMzbr via :codepen: @codepen

Online Version: https://css-pattern.com/#g124

#CSS

Hyperplexed makes some amazing web dev tutorial videos. Here's one in a Dr Seuss rhyme.

https://youtu.be/HIrDMR6CaHY?si=uFyfIKkdko4YmEOH

#JavaScript #css #webdevelopment

Un calendrier de l'avent du développement front-end, principalement ciblé sur CSS et JS. Parfait pour découvrir les nouveautés en la matière petit à petit, un article par jour 😊

12 Days of Web
https://12daysofweb.dev/

#css #javascript #avent — https://links.kalvn.net/shaare/kwLUag

Paginating a horizontally scrolling <ul> laid out with a #CSS column property is surprisingly difficult #WebDev

🦖 :has() 🦖

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.

#webdev #CSS

"You don't need #JavaScript for that."

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

"Choose the least powerful language suitable for a given purpose... On the web this means preferring HTML over #CSS, and then CSS over JS."

Weird HTML hacks of the past 🤣

https://tedium.co/2023/11/24/weird-html-hacks-history

#HTML #history #InternetHistory #CSS #Netscape #NetscapeNavigator #InternetExplorer #Web1

Hello Fediverse, hello Bits&Baeume,

I’ve moved recently, time for a (re)introduction — and a heartfelt Thank You! to @ben

I am a writer, copywriter, online editor, and I generally write a lot; I design websites with plain HTML/CSS/JS or using WordPress and other CMS; occasionally I work as a speaker, podcast producer, sound designer — to mention the most important bits.

My blog: https://wernerprise.com/blog (mostly German, but I am considering making it bilingual at some point.)

Climate catastrophe is on my mind, degrowth close to my heart; capitalism needs a short leash!

Also, I still take SARS-CoV-2 and COVID-19 very seriously. Thus:

#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIsNotOver #WearAMask #TeamCaution #CleanAir
#NewHere #Intro #ClimateCatastrophe #Capitalism #WealthRedistribution #TaxTheRich #Democracy #AntiAI #AntiFa #StopConsumerism #WeAreThe99Percent
#HTML #CSS #JavaScript #Webdesign #WordPress

Hallo Fediverse, hallo Bits&Baeume,

ich bin umgezogen und erst seit ein paar Stunden hier auf dem neuen Server, deswegen eine kurze Vorstellung — und ein herzliches Dankeschön an @ben

Ich bin Texter und Online-Redakteur, schreibe auch sonst viel; ich gestalte Websites in HTML, mit WordPress oder anderen CMS, arbeite außerdem gelegentlich als Sprecher, Podcast-Produzent, Sounddesigner – um mal die wesentlichen Dinge genannt zu haben.

Mein Blog: https://wernerprise.com/blog

Mir liegt die Klimakatastrophe auf der Seele und Degrowth (Décroissance) am Herzen; Kapitalismus braucht straffe Zügel!

Außerdem nehme ich nach wie vor SARS-CoV-2 und COVID-19 ernst. Daher:

#SARSCoV2 #COVID19 #COVID #NoCOVID #LongCOVID #COVIDIstNichtVorbei #WearAMask #MaskeAuf #DieMaskeBleibtAuf #TeamVorsicht #CleanAir
#NeuHier #Intro #Klimawandel #KlimaKatastrophe #Kapitalismus #Umverteilung #Reichensteuer #Demokratie #AntiKI #AntiFa #Konsumstop #WirSindDie99Prozent
#HTML #CSS #JavaScript #Webdesign #WordPress

Edit: I needed position fixed instead, see thread

I must be missing something simple, but I can't get position sticky to work, applied to a footer. It just displays as default at the top, both Safari and Chrome - help?

css:

```
footer { position: sticky; bottom: 0; }
```

html:

```
<body>
<footer>test</footer>
</body>
```

#css

This was helpful—a space toggle for visually hiding inputs and other elements. Which other elements should I add?

Update: this isn’t safe to use in a general sense as it unsets the selected elements. Yikes!. A style query instead is a bit more manageable if we could use those.

#CSS

#Firefox #css

Finis les longs menus contextuels dans Firefox où la majorité des actions ne sert jamais.

J'ai découvert l'existence du fichier userChrome.css ainsi que la Browser Toolbox.

you don't need javascript for that

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

#js #webdev #styling #css #browsers

🔗 “An Interactive Guide to CSS Grid” by @joshwcomeau

#CSS #Grid

⚓️ https://nicolas-hoizey.com/links/2023/11/23/an-interactive-guide-to-css-grid/

This is pretty neat. I’m trending towards wanting to use less #javascript, in my curmudgeonly older age. #html #css

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

It's quite incredible that these days you can do such things with pure #css

https://codepen.io/jh3y/pen/MWLPMYL

I'm back to writing daily. This time it's about CSS and today's topic is Dropcaps, my favorite thing when it comes to letters.

Don't shoot me, please, Firefox and Safari have some implementing to do.

https://www.sarahgebauer.com/post/day-2-drop-a-cap/

#css #typography

This is an excellent article by @Kilian

I’m not a big fan of summary/details generally because it’s just too inconsistent, but dialogs are great. And I didn’t actually know about input type="color" yet.

Well worth a read.

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

#css #js #JavaScript #html #Frontend #Webdev #Webdevelopment

I'd love to use SVG, there's cool stuff you could do with it...

But it's so fucking broken and heaven forbid you comment on a 15+ year old bug with your use case because you get hit with a big fat dismissive attitude.

Anyway, this text effect could have been done without duplication & the text could have been selectable.

IF SVG worked.

That's not the case, so a non-selectable duplicated text is all you get https://codepen.io/thebabydino/pen/ZEwjvvx

#svg #rant #coding #css #textEffect #frontend #webDev #filter

@hunger Oh, nice! Love the work you're doing over at #Slint! ❤️

Also really enjoyed your interview at Rustacean Station.🙂 🎧

That's impressive! Please don't get me wrong: of course it matters, whether you are using a full-blown browser for your GUI or going full native like Slint.

To be clear: in the OP, I'm talking about #HTML and #CSS as a GUI system in general, no browser context at all.

I'm thinking about #taffy and how it is used in #bevy for example:
https://github.com/DioxusLabs/taffy

#Rust

A very simple toggle...
https://codepen.io/dutchcelt/pen/MWLzYOj

#css

I think I might have convinced my team to reconsider using a Tailwind first approach for our next project. I still love having a utility library but we don't use React so I've found it gets unwieldy pretty fast when not everything is a component. #CSS

"The tricky thing with the web is that once you learn how to build something there is never a reason to have to learn it again. That's the contract we have: the web is backwards compatible."

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

Interesting showcase by @Kilian how #HTML & #CSS provide tons of functionality without the need of #JavaScript.

Yet he's also mentioning that it's not perfect and you should ask yourself if you REALLY need to use JS in a particular case.

@shvarcs The #CSS snobs killed the #HTML <CENTER> tag and have been reaping the whirlwind ever since

THREE new chapters just added to the CSS in Depth MEAP! Learn about Responsive Design, Cascade Layers, and writing Modular CSS!

https://www.manning.com/books/css-in-depth-second-edition?a_aid=kjg&a_bid=a7bc24da&chan=mm_mastodon

#CSS #WebDev #CSSinDepth

I feel myself getting back into learning web design. 😀

I was looking at the HTML code of a Neocities blog and realized I understood what almost all of it meant, so I have made some progress. 😅

Just feels like I haven't because I don't know a lot of CSS. 😖

#WebDev #coding #WebDesign #HTML #CSS

Came across this cool #CSS pattern https://codepen.io/josetxu/pen/mdvzaQZ?editors=0100 - uses 35 gradients, so I instantly knew I could simplify it and make it easily customisable.

So here it is my version on #CodePen https://codepen.io/thebabydino/pen/WNPamBB?editors=0100 - 9 gradients with n set to 4. Because yes, you can change n! 😎

#coding #pattern #cssPattern #cssGradient #frontend #code #maths #blending #blendMode #xor #logic #trigonometry #geometry #webDev #webDevelopment

I've been deep diving into the capabilities of CSS because of CSS Battle dot dev and now I can quickly do some isometric buttons PDQ:
https://codepen.io/artlung/pen/dyagrwV #CSS #Design #HTML

#CSS Nesting is Here: "In case you missed it, nesting is now supported natively in CSS in all major browsers! Nesting is a popular feature of preprocessors like Sass and has been, in my opinion, on of the main reasons to keep using preprocessors. But with nesting supported natively, it might soon be time to consider dropping a preprocessor altogether." https://css-irl.info/css-nesting-is-here/

#CSS Responsive Multi-Line Ribbon Shapes: "In this second installment of this brief two-part series, we look at two additional ribbon variations that introduce techniques for masking a repeated background gradient in CSS." https://www.smashingmagazine.com/2023/11/css-responsive-multi-line-ribbon-shapes-part2/

I've recently been learning CSS and it has raised a question in my mind that never occured to me before. As a blind user I use the NVDA screen reader primarily. When using the NVDA+F keystroke to see things like font, color and size I somehow expected to see information about if someting had a border, or margin, or padding. Maybe not necessarily an abundance of information because that could get to be a bit much.

My question is thus. Is there a keystroke that would in fact show me these things as well as other formatting information that is not a repeat of what you get with NVDA+F?

#blind #NVDA #screenreader #CSS

Today's lunch video is "CSS4 Is Coming (Not a Clickbait)" — "A detailed explanation of why #CSS4 is coming even though we were told that it will never happen, what it might include, and what all of this means for you." #css https://www.youtube.com/watch?v=j4mOm1qic7k

So this pure #CSS gravity button has been my most popular demo in November.

You can check out the live demo on #CodePen:
https://codepen.io/thebabydino/pen/bGzeQrv

#codevember #coding #frontend #gravity #webDev #webDevelopment #particles #physics #CSSphysics

"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

Are you looking for a new CSS loader for your next project? Look no further!

👉 https://random.css-loaders.com

One click and you get a nice loader from the biggest online collection ever 🤩

As a bonus, you get a unique link to your favorite loader. Share the one you got 👇

⚠️ This feature is powered by the :has() selector so Firefox users need to wait until the end of the year to enjoy it 🤞

#CSS

#Development #Updates
Better floats, :has(), color-mix(), and more · Servo, the evolving browser engine, is steadily improving https://ilo.im/15xa4n

_____
#WebDev #Browser #BrowserEngine #WebStandards #Frontend #CSS

RT T. Afif @ CSS Challenges
We can easily get more variation using the same code structure
Demo: https://codepen.io/t_afif/full/BaMOozG via @CodePen
#CSS
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Create a ribbon shape with a fancy reveal effect
✅ Only one element
✅ No fixed size (it fits your text content)
✅ Optimized with CSS Variables
Demo: https://codepen.io/t_afif/full/poGZGZY via @CodePen
#CSS
</div>
:sys_twitter: https://twitter.com/ChallengesCss/status/1729585668307710106

oh, did I hear someone say "make the colors adjust to a light and dark mode automatically"?

I added a touch of #CSS to the underlying SVG to read some of the CSS variables #Homeassistant uses for its theming, and now the SVG uses e.g. the primary, text and card-background colors to adjust its palette automagically!

(gif marked as sensitive for flashing colors, in a ca 3sec interval)

The Millennium Falcon ugly sweater made with CSS. This is based on a LEGO Holiday sweater from the New Christmas set.

https://dev.to/jarvisscript/ugly-sweater-millennium-falcon-46na #LEGO #CSS #UglySweater #StarWars

Just starting to play with the soon-to-be-supported HTML “popover” attribute and mess with demos.

Am I missing something, or is it currently not possible to position a popover without the future CSS Anchor Positioning feature?

#css #html

Experimenting with features that have been on the bleeding edge for some time is weird.

Firefox (left) supports Colr fonts but not initial-letter.

Safari (middle) used to support Colr fonts and supports initial-letter.

Chrome supports both but initial-letter still needs to be prefixed.

I think I'll play with fonts with colors in them. Too bad Safari users won't see them. They'll get whole word, that has to be enough.

#css #font #webdesign #firefox #chrome #safari #progressiveEnhancement

Is 2024 the year of #CSS Nesting? Browser support is starting to look pretty good… #WebDev

https://thathtml.blog/2023/11/is-2024-the-year-of-css-nesting/

Understanding the #CSS auto-resizing textarea trick: "I decided to dig into that grid trick and figure out how it works, as well as adapt it slightly for my own preferences." https://til.simonwillison.net/css/resizing-textarea

Getting started with #CSS container queries: "As of this year, container queries are supported in all major browsers. But what are they, and how can we use them to build more robust, flexible layouts? Do we still need media queries? Let's find out." https://developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries/

Thought by 2023 I'd be forced away from foundations of HTML #PHP #JavaScript #CSS (and #WordPress).

A partial list of "hot and need to learn to survive" things over the past 20 years that didn't derail me:

- Flash/ActionScript
- ColdFusion
- Ruby on Rails
- (Countless JS "frameworks" that mostly don't exist today)
- Go
- JAMSTACK
- React
- AMP
- "Web3"
- Crypto

Some of these were/are useful. Some I learned... but still coding on same foundation I started 2 decades ago BLOWS MY MIND!

lch()
oklch()
goodlch()
thinkigotitlch()
lchfinalv3forreal()
fuckitlch() (maps to hsl)
#css

Oh boy, I kinda forgot about this, the JavaScript-Based Style Sheets proposal from 1996. Way ahead of the current CSS-in-JS crowd 😉

https://www.w3.org/submissions/1996/1/WD-jsss-960822

#web #css #js