Articles Tagged CSS

2016 was only three years ago, but that’s almost a whole other era in web development terms. The JavaScript landscape was in turmoil, with up-and-comer React — as well as a little-known framework called Vue — fighting to dethrone Angular.

Like many other developers, I felt lost. I needed some clarity, and I figured the best way to get it was simply to ask fellow coders what they used, and more importantly, what they enjoyed using. The result was the … Read article “Why CSS Needs its Own Survey”

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be.… Read article “Slice and Dice a Disc with CSS”

In early 2017, I presented a couple of workshops on the topic of CSS feature detection, titled CSS Feature Detection in 2017.

A friend of mine, Justin Slack from New Media Labs, recently sent me a link to the phenomenal Feature Query Manager extension (available for both Chrome and Firefox), by Nigerian developer Ire Aderinokun. This seemed to be a perfect addition to my workshop material on the subject.

However, upon returning to the material, I … Read article “Using Feature Detection to Write CSS with Cross-Browser Support”

Ever get one of those, “I can do that with CSS!” moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018.

They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting … Read article “Switch font color for different backgrounds with CSS”

Have you seen Lynn Fisher's extraordinary A Single Div project? Not only are all these graphics drawn in just HTML and CSS, they are all created with (you guessed it) a single <div>.

Why would she do that? Here's one pertinent possibility: it's none of our business. We're free to wonder, or even ask if it's done respectfully enough. But does it really matter? Let's stop short of assuming she doesn't know what's she's doing, assuming it's a twisted form of pain, or that she's unaware of other technologies. Check out the example where she drew the official SVG logo with CSS and a single div. Woke.

When I saw Chris' article on notched boxes, I remembered that I got a challenge a while ago to CSS a design like it, but with rounded, scooped corners instead. So, let's see how we can do it that way instead and expand it to multiple corners while being mindful of browser support.

CSS is an abbreviation for Cascading Style Sheets.

While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second “S” a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.… Read article “CSS Basics: The Second “S” in CSS”