OR 

Accessible SVG Icons With Inline Sprites

This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here‘s the ideal example: button type="button" Menu svg class="svg-icon" role="img" height="10" width="10" viewBox="0 0 10 10" aria-hidden="true" focusable="false" path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/ /svg /button Notes: It‘s not the svg itself that is interactive it‘s wrapped in a button for that.

favicon of http://css-tricks.com

What do you name color variables?

What naming scheme do you use for color variables? Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?Ive tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. Lea Verou (@LeaVerou) October 14, 2018 I remember the very first time I tried Sass on a project. The first thing I wanted to do was variablize my The post What do you name c

favicon of http://css-tricks.com

Compound Components in React Using the Context API

Compound components in React allow you to create components with some form of connected state that‘s managed amongst themselves. A good example is the Form component in Semantic UI React. To see how we can implement compound components in a real-life React application, we‘ll build a compound (multi-part) form for login and sign up. The state will be saved in the form component and we‘ll put React‘s Context AP to use to pas

favicon of http://css-tricks.com

Edge‘s Announcements

The public-consumption blog post: Ultimately, we want to make the web experience better for many different audiences. People using Microsoft Edge (and potentially other browsers) will experience improved compatibility with all web sites, while getting the best-possible battery life and hardware integration on all kinds of Windows devices. Web developers will have a less-fragmented web platform to test their sites against, ensuring that there are

favicon of http://css-tricks.com

Browser Diversity Commentary, Regarding the Edge News

Still no word from the horse‘s mouth about the reported EdgeHTML demise, but I hear that‘s coming later today. The blog posts are starting to roll in about the possible impact of this though. Andre Garzia: While we Blink, we loose the Web: Even though Opera, Beaker and Brave are all doing very good work, it is still Chrome engine behind them and that limits the amount of stuff they can build and innovate. It is like as The post Brows

favicon of http://css-tricks.com

A Visual, Intuitive Approach to Project Management

(This is a sponsored post.) You know how valuable project management is for teams of any size. Whether you‘re a small shop or full-blown agency, your clients and projects depend on tracked deliverables, solid communication, and a clear breakdown of the work that‘s needed. You may have a love/hate relationship with whatever project management platform you‘re using or have used in the past. It‘s common for a platform to be m

favicon of http://css-tricks.com

CSS Selectors are Conditional Statements

.foo { } Programmatically, is: if (element has a class name of "foo") { } Descendent selectors are logic and commas are . It just gets more complicated from there, with things like combinators and pseudo selectors. Just look at all the ways styles can cascade. Jeremy Keith: If you find you can‘t select something in the CSS, that‘s a sign that you probably need to add another class name to the HTML. The complexity is confined to The

favicon of http://css-tricks.com

DRY State Switching With CSS Variables: Fallbacks and Invalid Values

This is the second post in a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. The first installment walks through various use cases where this technique applies. This post covers the use of fallbacks and invalid values to extend the technique to non-numeric values. The strategy of using CSS Variables to drive the switching

favicon of http://css-tricks.com

Nesting Components in Figma

For the past couple of weeks, I‘ve been building our UI Kit at Gusto, where I work, and this is a Figma document that contains all of our design patterns and components so that designers on our team can hop in, go shopping for a component that they need, and then get back to working on the problem that they‘re trying to solve. There‘s a couple things that I‘ve learned since I started. First, building a UI Kit is immensely

favicon of http://css-tricks.com

Blue Beanie Day 2018

Another year! You better not cry, you better not shout, I‘m telling you why: @BlueBeanieDay is coming Nov. 30! Start sharing your #bbd photos, links, articles, and videos now: https://t.co/3US4vHBsDR#a11y #WebStandards #InclusiveDesign #ProgressiveEnhancement pic.twitter.com/AiV3ktRqka zeldman (@zeldman) October 24, 2018 I feel the same this year as I have in the past. Web standards, as an overall idea, has entirely taken hold and won the

favicon of http://css-tricks.com

The Software We Pay For

We did a Web Developer Economics series a few years ago, where we looked at the various costs of being a web developer: Web Developer Economics: One-Off Software Costs Web Developer Economics: Hardware Costs Web Developer Economics: Monthly Service Costs Web Developer Economics: The Wrapup I‘m sure some of that software and hardware has changed since then, but the spirit is the same. It costs money to have the things you need to do this j

favicon of http://css-tricks.com

The All Powerful Front-End Developer

I posted a video of this talk some months back, but it was nearly an hour and a half long. Here‘s an updated version that I gave at JAMstack_conf that‘s only 30 minutes: The gist is that the front-end stack is wildly powerful these days. Our front-end skillset can be expanded to give us power to do back-end-ish things and talk with APIs that allow us to build entire products in a way we haven‘t quite been able to before. The po

favicon of http://css-tricks.com

DRY Switching with CSS Variables: The Difference of One Declaration

This is the first post of a two-part series that looks into the way CSS variables can be used to make the code for complex layouts and interactions less difficult to write and a lot easier to maintain. This first installment walks through various use cases where this technique applies. The second post (coming tomorrow!) will cover the use of fallbacks and invalid values to extend the technique to non-numeric values. What if I told you a single T

favicon of http://css-tricks.com

Preventing Content Reflow From Lazy-Loaded Images

You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser‘s viewport. There are a plethora of JavaScript-based lazy loading solutions. GitHub has over 3,400 different lazy load repos, and those are just the ones with "lazy load" in a searchable string! Most of them rely on the same trick: Instead of putting an image‘s URL in the src attribute, you put

favicon of http://css-tricks.com

Sayonara Edge

Sounds like Edge is going to spin down EdgeHTML, the engine that powers edge, and go with Chromium. It‘s not entirely clear as I write whether the browser will still be called Edge or not. Opera did this same thing in 2013. We‘ll surely be seeing much more information about this directly from Microsoft, and hot takes galore. Probably three major categories of hot-take: Hallelujah, I dislike supporting Edge, this will make my job eas

favicon of http://css-tricks.com

Bridging the Gap Between CSS and JavaScript: CSS Modules, PostCSS and the Future of CSS

In the previous post in this two-part series, we explored the CSS-in-JS landscape and, we realized not only that CSS-in-JS can produce critical styles, but also that some libraries don‘t even have a runtime. We saw that user experience can significantly improve by adding clever optimizations, which is why this series focuses on developer experience (the experience of authoring styles). In this part, we‘ll explore the tools for "plain

favicon of http://css-tricks.com

It‘s not about the device.

Ever have that, "Ugighgk, another device to support?!" feeling? Like, perhaps when you heard that wrist devices have browsers? Ethan‘s latest post is about that. Personally, the Apple Watch is interesting to me not because it‘s a watch. Rather, it‘s interesting to me because it‘s a smaller-than-normal touchscreen attached to a cellular antenna, and one that‘s not necessarily on the most reliable connection. It helps

favicon of http://css-tricks.com

Front-End Developers Have to Manage the Loading Experience

Web performance is a huge complicated topic. There are metrics like total requests, page weight, time to glass, time to interactive, first input delay, etc. There are things to think about like asynchronous requests, render blocking, and priority downloading. We often talk about performance budgets and performance culture. How that first document comes down from the server is a hot topic. That is where most back-end related performance talk ente

favicon of http://css-tricks.com