Masthash

#css

Inautilo
1 minute ago

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

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

jfmblinux
1 minute ago

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.

Everett Wilson
2 hours ago

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 !

Gtk CSS-code with big negative margins and prefixed properties
Christopher Kirk-Nielsen
6 hours ago

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

Marc JESTIN ✅
8 hours ago

#Mastodon Web, c'est un champion !

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

🤡​ 😂​ :ablobcool:​

Inautilo
12 hours ago

#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

Donncha Ó Caoimh
15 hours ago

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

kalvn
17 hours ago

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 #aventhttps://links.kalvn.net/shaare/kwLUag

Sebin Nyshkim :drgn_happy:
1 day ago

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

randomMDN
1 day ago

🦖 :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

David Bisset
1 day ago

"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."

WERNERPRISE° — Thomas Werner
1 day ago

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

WERNERPRISE° — Thomas Werner
1 day ago

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

Joe Lanman
1 day ago

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

Egor Kloos
1 day ago

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

:root {
	--TRUE: initial;
	--FALSE: ;
	--sr-only: var(--FALSE);
	[sr-only], .sr-only {
		--sr-only: var(--TRUE);
	}
}
:is(input, button, select, [sr-only], .sr-only) {
	clip-path: var(--sr-only, inset(50%)) !important;
	height: var(--sr-only, 1px) !important;
	width: var(--sr-only, 1px) !important;
	overflow: var(--sr-only, hidden) !important;
	position: var(--sr-only, absolute) !important;
	white-space: var(--sr-only, nowrap) !important;
	border: var(--sr-only, 0) !important;
}

#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.

Capture d'écran d'un menu Firefox contextuel non modifié.

Ici : 14 options proposées
Capture d'écran d'un menu Firefox contextuel modifié en éditant le fichier userChrome.css.

Ici : 10 options ont été supprimées
YurkshireLad
2 days ago

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

Michael
2 days ago

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

Ana Tudor 🐯
2 days ago

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

Text cutout with the magenta panel it's cut out of being sliced diagonally and the slices offset along their length in a direction depending on their parity. The panel slices project shadows onto those below them vertically on the page and onto the purple textured background behind.
Jan :rust: :ferris:
2 days ago

@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

Egor Kloos
2 days ago
A code example of what modern CSS can do.
James Basoo
2 days ago

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

Steve Frenzel
2 days ago

"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.

Mark Gardner ‍:sdf:
2 days ago

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

Keith J Grant
2 days ago

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

Book cover of CSS in Depth, second edition. Featuring a sketch of a woman in pastoral attire, in the style common on Manning books
Noelle :verified:
2 days ago

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

Ana Tudor 🐯
2 days ago

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

Screenshot of the linked demo with $n being 5, so we have a diagonal 5 rain drips repeating pattern.
Joe Crawford
2 days ago

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 Basics
2 days ago

#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/

Friday Front-End
2 days ago

#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/

Baethyn
2 days ago

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

Friday Front-End
2 days ago

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

Ana Tudor 🐯
2 days ago

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

Animated GIF. Shows particles accelerating towards, smashing into and then exploding upon colliding with a button. There's also the option of viewing the animation in slow motion by checking a checkbox.
Steve Frenzel
3 days ago

"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

Overview of different CSS loaders generated randomly
Inautilo
3 days ago

#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

CodePen.IO :verify:
3 days ago

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

Media source: https://video.twimg.com/ext_tw_video/1729585187250487296/pu/vid/avc1/658x420/1hEhJOE_eMR8l-El.mp4?tag=12
Maxi :coffeebeans:
3 days ago

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)

My floorplan element from homeassistant, representing a single room. Interactive devices are displayed either as icons or as furniture pieces in a white color, other furniture is shown in a color much closer to the overall background color.

The theme switches from a dark theme full of blue-grey colors to a light theme with a lot of white and much lighter blues.
Chris Jarvis :verified:
3 days ago

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

The Millennium Falcon

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

The Spicy Web
3 days ago

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/

CSS Basics
3 days ago

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

Friday Front-End
3 days ago

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/

David Bisset
3 days ago

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!

Daniel Schulz
3 days ago

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