After solving the fit-to-width text, stuck state for sticky elements, and scroll shadows, I wondered: how many other items from various #CSS wishlists could I solve with scroll-driven animations? A lot.
Styling flex and grid rows and columns, staggered animations, wrap detection, and more — all in my new article — “Position-Driven Styles”.
I've been in this industry long enough to see things constantly come & go. #React is no different - it'll be replaced by other frameworks soon & those will be hot for a bit. Then that one will be replaced & so on. Learn your basics! #HTML#CSS, plain#JS. Those are the only things that don't come & go & will take you through your entire career, regardless of what's cool right now. Will I still be coding #WordPress in 10 years? Who knows! But my knowledge of #PHP will carry me on.
The only way to 'avoid the cascade' is by not writing #CSS. Every web style, no matter how or where we write it, participates in the cascade.
CSS wouldn't even be possible without a cascade of some kind. Since it's possible to write conflicting styles, browsers need some way to resolve those conflicts. That's all the cascade is.
We can imagine different rules for that process – what we have now wasn't the original proposal, & we've made updates recently – but there has to be something.
Je suis à la recherche de mon prochain boulot! Je suis dev front-end / intégrateur CSS avec 14 ans d'expérience dans une petite entreprise sur des projets d'ampleurs et de natures très variées, donc assez polyvalent, avec un bon sens du détail et l'amour du travail bien fait. Je cherche plutôt un job en présentiel (ou mixte) dans la région genevoise, donc si vous entendez quelque chose, pensez à moi! 🤗
customizable kbin color theme. use the panel with color options to select your colors. for better results, only change the horizontal color slider to change the HUE but keep the VALUE (darkness/brightness) the same so things are still balanced.
📘 EPUB 3.3 is a distribution and interchange format for digital publications and documents. It enables the representation, packaging, and encoding of structured and semantically enhanced web content, including #HTML, #CSS, #SVG, and more, in a single-file container
This is kinda cursed and I feel kinda bad about this, but I just re-created Twitter UI to #Mastodon with #CSS only... wanted to see how quickly it's possible to do.
Now that I have everything in CSS vars (shame that Mastodon has them hardcoded at the moment), I can use this as base to create another theme for myself. #MastoAdmin#WebDev#Twitter
Edit: Fixed things to the screenshot as I'm kind of a perfectionist/OCD-person.
I have come to understand some people still do not know color-scheme, and that it's a nice way to make dark mode scrollbars without doing the things @eric will tell you is a bad idea :)
This will turn to black around #AAAAAA. adjust brightness lower if you want it to turn to black earlier. play around with contrast as well, using low and high values.
After playing around with this (thanks @mia), we noticed there's some fringes happening at certain color values right when it is about to switch from black to white, so this might work best with colors that you get to control to some degree.
Less fringing with SVG filters
But! Here is a version that has no fringing:
Add this somewhere in your markup- it can be anywhere as long as the id bwFilter can be referenced.
<br></br><svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0"><br></br> <defs><br></br> <filter id="bwFilter" color-interpolation-filters="sRGB"><br></br> <!-- Convert to grayscale based on luminance --><br></br> <feColorMatrix type="matrix"<br></br> values="0.2126 0.7152 0.0722 0 0<br></br> 0.2126 0.7152 0.0722 0 0<br></br> 0.2126 0.7152 0.0722 0 0<br></br> 0 0 0 1 0"/><br></br> <!-- Expand edges slightly to clean up any fringing --><br></br> <feMorphology operator="dilate" radius="2"/><br></br> <!-- Apply the threshold to determine if the color should be black or white --><br></br> <feComponentTransfer><br></br> <feFuncR type="linear" slope="-255" intercept="128"/><br></br> <feFuncG type="linear" slope="-255" intercept="128"/><br></br> <feFuncB type="linear" slope="-255" intercept="128"/><br></br> </feComponentTransfer><br></br> <!-- Composite step to clean up the result --><br></br> <feComposite operator="in" in2="SourceGraphic"/><br></br> </filter><br></br> </defs><br></br></svg><br></br>
Just to push up the awareness: next year, 2024, #Firefox will be 20 years old.
Firefox changed the web for the better. I could learn #CSS simply by experimenting.
During these years Firefox has been the most responsible browser around. While it has had it's own share of bugs, I've never experienced a lot of issues with new features. Usually once a new feature has shipped it has worked well.
I can't say the same of the remaining two other alternative browser engines.
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext :picklerick:
I got carried away last night after reading @bramus post on scroll direction detection using #CSS#scrollDrivenAnimations. It turns out you can control #pixelArt sprites in 8 directions! With zero #JS!
OC rgbBin - customize your color theme for kbin (userstyles.world)
customizable kbin color theme. use the panel with color options to select your colors. for better results, only change the horizontal color slider to change the HUE but keep the VALUE (darkness/brightness) the same so things are still balanced.