Engineering

Engineering

983 bookmarks
Custom sorting
CSS Scroll Snap - Ahmad Shadeed
CSS Scroll Snap - Ahmad Shadeed
An in-depth article on CSS scroll snap, why to use, how it works, and lots of examples.
·ishadeed.com·
CSS Scroll Snap - Ahmad Shadeed
scroll-behavior - CSS: Cascading Style Sheets | MDN
scroll-behavior - CSS: Cascading Style Sheets | MDN
The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
·developer.mozilla.org·
scroll-behavior - CSS: Cascading Style Sheets | MDN
Vertical rhythm using CSS lh and rlh units | pawelgrzybek.com
Vertical rhythm using CSS lh and rlh units | pawelgrzybek.com
Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base.
·pawelgrzybek.com·
Vertical rhythm using CSS lh and rlh units | pawelgrzybek.com
Scoped CSS is Back
Scoped CSS is Back
Several years ago, I made a plea to save scoped CSS. One of the top features on my CSS wishlist was on the chopping block, and despite a pretty big push from th
·keithjgrant.com·
Scoped CSS is Back
An introduction to @scope in CSS
An introduction to @scope in CSS
Style based on proximity and set a lower boundary for a selector.
·fullystacked.net·
An introduction to @scope in CSS
Old CSS, new CSS / fuzzy notepad
Old CSS, new CSS / fuzzy notepad
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff an
·eev.ee·
Old CSS, new CSS / fuzzy notepad
attr() - CSS: Cascading Style Sheets | MDN
attr() - CSS: Cascading Style Sheets | MDN
The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.
·developer.mozilla.org·
attr() - CSS: Cascading Style Sheets | MDN
The New CSS Math: rem() and mod()
The New CSS Math: rem() and mod()
New math constants and functions are coming to CSS... now with more remainders and modulo
·danielcwilson.com·
The New CSS Math: rem() and mod()
Workarounds for buggy gradients
Workarounds for buggy gradients
CSS has a great new feature where you can specify the color space to use by adding in to the gradient (not yet supported in Firefox). This is especially useful
·keithjgrant.com·
Workarounds for buggy gradients
CSS is fun again
CSS is fun again
CSS has been undergoing a quiet renaissance lately. Lots of big features which previously required an external tool to use, are now native parts of the language, and its growing more and more all the time. If you haven't used CSS in a long time, for whatever reason, now is the time to take a look again.
·pdx.su·
CSS is fun again
A Couple of New CSS Functions I’d Never Heard Of
A Couple of New CSS Functions I’d Never Heard Of
light-dark() Saw Bramus post about this. :root { color-scheme: light dark; –text-color: light-dark(#333, #ccc); } Apparently, this is just a first step on the way toward a more robust schemed…
·chriscoyier.net·
A Couple of New CSS Functions I’d Never Heard Of
Modular CSS and different ways to structure your stylesheets
Modular CSS and different ways to structure your stylesheets
This week, I’ve written about classless vs. class-based CSS, and how I approach CSS architecture. I’ve also written a fair bit recently about how I’m starting to consider build tools and anti-pattern. This has led to a few conversations about how to structure CSS and and work with modular files if you’re not using a compiler like Sass. Today, I wanted to talk about that. Let’s dig in! Modular files and build tools One of the big benefits of using a build tool like Sass or css-nano is that you break your CSS up into smaller, more modular files, then combine them into one file for deployment.
·gomakethings.com·
Modular CSS and different ways to structure your stylesheets
An Interactive Guide to CSS Grid
An Interactive Guide to CSS Grid
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in my own learning journey.
·joshwcomeau.com·
An Interactive Guide to CSS Grid
CSS Utility Classes and "Separation of Concerns"
CSS Utility Classes and "Separation of Concerns"
Over the last several years, the way I write CSS has transitioned from a "semantic" approach to something more like what people call "functional CSS." In this post I explain how I got to this point and share some of the lessons and insights I've picked up along the way.
·adamwathan.me·
CSS Utility Classes and "Separation of Concerns"
Things You Can Do With CSS Today — Smashing Magazine
Things You Can Do With CSS Today — Smashing Magazine
The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too.
·smashingmagazine.com·
Things You Can Do With CSS Today — Smashing Magazine
The Analytics That Matter | CSS-Tricks
The Analytics That Matter | CSS-Tricks
I've long been skeptical of quoting global browser usage percentages to justify their usage of browser features. It doesn't matter what global usage of a
·css-tricks.com·
The Analytics That Matter | CSS-Tricks
Houdini.how
Houdini.how
The community-driven resource library of CSS Houdini worklets. Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today.
·houdini.how·
Houdini.how
Creating UI Components in SVG | CSS-Tricks
Creating UI Components in SVG | CSS-Tricks
I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a
·css-tricks.com·
Creating UI Components in SVG | CSS-Tricks
Using SVG | CSS-Tricks
Using SVG | CSS-Tricks
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG
·css-tricks.com·
Using SVG | CSS-Tricks
Smooth Scrolling | CSS-Tricks
Smooth Scrolling | CSS-Tricks
Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior.
·css-tricks.com·
Smooth Scrolling | CSS-Tricks
How to Scale SVG | CSS-Tricks
How to Scale SVG | CSS-Tricks
The following is a guest post by Amelia Bellamy-Royds. Amelia has lots of experience with SVG, as the co-author of SVG Essentials and author of the
·css-tricks.com·
How to Scale SVG | CSS-Tricks
Getting JavaScript to Talk to CSS and Sass | CSS-Tricks
Getting JavaScript to Talk to CSS and Sass | CSS-Tricks
JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large
·css-tricks.com·
Getting JavaScript to Talk to CSS and Sass | CSS-Tricks