Menu

CSS

CSS Architecture for Modern JavaScript Applications

December 6th, 2019

There is a lot to like from Mike Riethmuller here:

  • The title. When you’re building a website from JavaScript-powered components anyway, that is a moment to talk about how to do styling, because it opens some doors to JavaScript-powered styles that you probably wouldn’t otherwise choose.
  • The personal experience and pragmatism. Drawing on five years of consulting, he’s seeing that component re-use and style understandability is suffering, not improving, partly due to every team having different approaches. He says “it’s

Read article

The post CSS Architecture for Modern JavaScript Applications appeared first on CSS-Tricks.

Firefox 71: First Out of the Gate With Subgrid

December 5th, 2019

A great release from Firefox this week! See the whole roundup post from Chris Mills. I’m personally stoked to see clip-path: path(); go live, which we’ve been tracking as it’s so clearly useful. We also get column-span: all; which is nice in case you’re one of the few taking advantages of CSS columns. But there…

Dark Mode Favicons

December 3rd, 2019

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel=”icon” href=”/icon.svg”>). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-sceme media query, and as a result, a favicon that supports dark mode!   <svg width=”100″ height=”100″ xmlns=”http://www.w3.org/2000/svg”> <style> circle…

Having a Little Fun With Custom Focus Styles

December 2nd, 2019

Every front-end developer has dealt or will deal with this scenario: your boss, client or designer thinks the outline applied by browsers on focused elements does not match the UI and asks you to remove it. Or you might even be looking to remove it yourself. So you do a little research and find out…

Simplified Fluid Typography

November 29th, 2019

Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units. You can literally set type in viewport units (e.g. font-size: 4vw), but the fluctuations in size are so extreme…

The Power (and Fun) of Scope with CSS Custom Properties

November 27th, 2019

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set them in declaration blocks like –size: 1em and use them as values like font-size: var(–size);, they differ from preprocessor variables (e.g. they cascade), and here’s a guide with way more…

iOS 13 Broke the Classic Pure CSS Parallax Technique

November 27th, 2019

I know. You hate parallax. Do you know what we should hate more? When things that used to work on the web stop working without any clear warning or idea why. Way back in 2014, Keith Clark blogged an exceptionally clever CSS trick where you essentially use a CSS transform to scale an element down…

Playing Sounds with CSS

November 25th, 2019

CSS is the domain of styling, layout, and presentation. It is full of colors, sizes, and animations. But did you know that it could also control when a sound plays on a web page? This article is about a little trick to pull that off. It’s actually a strict implementation of the HTML and CSS,…

We are Programmers

November 22nd, 2019

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you’re here, chances are you’re a programmer, too. The thing is, the details in programming layout with CSS are different, for example, than the details in programming API endpoints with Ruby. Or machine learning with Python. Or programming a…

The New Good Ol’ Days

November 22nd, 2019

Eighteen years into this game, I love to reminisce back to the good ol’ days of the early to mid-2000s when there was an explosion of creativity on the web. It felt fresh and unbridled, with boundaries expected to be pushed at every turn, and they were. This was mainly down to one thing, the…