this vs that - What is the difference between ___ and ___ in the front-end development?
A handy reference for explaining the differences between confusingly similar bits of HTML, CSS, and JavaScript.
Link tags: css
915
Smashing Podcast Episode 21 With Chris Ferdinandi: Are Modern Best Practices Bad For The Web? — Smashing Magazine
I really enjoyed this interview between Drew and Chris. I love that there’s a transcript so you can read the whole thing if you don’t feel like huffduffing it.
On the origin of cascades
This is a great talk by Hidde, looking at the history and evolution of cascading style sheets. Right up my alley!
Pausing a GIF with details/summary | CSS-Tricks
This is such a clever and useful technique! It’s HTML+CSS only, and it’s a far less annoying way to display animated GIFs.
(Does anybody even qualify the word GIF with the adjective “animated” anymore? Does anyone know that there used to be such a thing as non-animated GIFs and that they were everywhere?)
MSEdgeExplainers/explainer.md at main · MicrosoftEdge/MSEdgeExplainers
This is great! Ideas for allowing more styling of form controls. I agree with the goals 100% and I like the look of the proposed solutions too.
The team behind this are looking for feedback so be sure to share your thoughts (I’ll probably formulate mine into a blog post).
Custom Property Coverup | Amber’s Website
This is a great bit of detective work by Amber! It’s the puzzling case of The Browser Dev Tools and the Missing Computed Values from Custom Properties.
Who do I know working on dev tools for Chrome, Firefox, or Safari that can help Amber find an answer to this mystery?
CSS Vocabulary
This is a nifty visual interactive explainer for the language of CSS—could be very handy for Codebar students.
CSS photo effects - a Collection by Lynn Fisher on CodePen
These wonderfully realistic photo effects from Lynn are quite lovely!
What is CSS Specificity? Sarah Chima - Front-End Developer
An excellent and clear explanation of specificity in CSS.
Uncommon CSS Properties
I count at least three clever CSS techniques I didn’t know about.
Takin’ five. — Ethan Marcotte
I linked to the first of Ethan’s short videos on accessibility last week, but it’s well worth checking out all five:
Grid Cheatsheet
A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.
CSS folded poster effect
This is a very nifty use of CSS gradients!
Striking a Balance Between Native and Custom Select Elements | CSS-Tricks
I think this a solution worthy of Solomon. In this case, the Gordian knot is the select element and its inevitable recreation in order to style it.
What if we instead deliver a native select by default and replace it with a more aesthetically pleasing one if possible? That’s where the “hybrid” select idea comes into action. It’s “hybrid” because it consists of two selects, showing the appropriate one at the right moment:
- A native select, visible and accessible by default
- A custom select, hidden until it’s safe to be interacted with a mouse
The implementation uses a genius combination of a hover media query and an adjacent sibling selector in CSS. It has been tested on a number of device/platform/browser combinations but more tests are welcome!
What I love about this solution is that it satisfies the stakeholders insisting on a custom component but doesn’t abandon all the built-in accessibility that you get from native form controls.
CSS Custom Properties Fail Without Fallback · Matthias Ott – User Experience Designer
Matthias has a good solution for dealing with the behaviour of CSS custom properties I wrote about: first set your custom properties with the fallback and then use feature queries (@supports) to override those values.
Hybrid positioning with CSS variables and max() – Lea Verou
Yet another clever technique from Lea. But I’m also bookmarking this one because of something she points out about custom properties:
The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.
That explains an issue I was seeing recently! I couldn’t understand why an older browser wasn’t getting the fallback I had declared earlier in the CSS. Turns out that custom properties mess with that expectation.
Global and Component Style Settings with CSS Variables — Sara Soueidan
Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.
Oh, and she’s using Fractal to organise her components:
I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.
Sass Color Functions in CSS | Jim Nielsen’s Weblog
I’m not the only one swapping out Sass with CSS for colour functions:
Because of the declarative nature of CSS, you’re never going to get something as terse as what you could get in Sass. So sure, you’re typing more characters. But you know what you’re not doing? Wrangling build plugins and updating dependencies to get Sass to build. What you write gets shipped directly to the browser and works as-is, now and for eternity. It’s hard to say that about your Sass code.
Global CSS options with custom properties | @mdo
This is clever—using custom properties to enable if/else logic in CSS.
CUBE CSS - Piccalilli
I really, really like Andy’s approach here:
The focus of the methodology is utilising the power of CSS and the web platform as a whole, with some added controls and structures that help to keep things a bit more maintainable and predictable. The end-goal is shipping as little CSS as possible—leaning heavily into progressive enhancement and modern techniques.
If you use the cascade for everything, you’re going to run into trouble. But equally, micro-managing styles on every element will also get you into trouble. I think Andy’s found a really great sweet spot here that gets the balance just right.
CUBE CSS in essence, is a progressive enhancement approach, vs a fight against the grain of CSS or a pixel-pushing your project to within an inch of its life approach.
Yes! It feels very “webby” to me.