(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.data-privacy-src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1596564-1', 'auto'); ga('send', 'pageview');
Home » NewsBlog » CSS

CSS and Network Performance

2018-11-14T03:05:16+00:00November 14th, 2018|Categories: News, Tutorials|Tags: |

JavaScript and images tend to get the bulk of the blame for slow websites, but Harry explains very clearly why CSS is equally to blame and harder to deal with: A browser can’t render a page until it has built the Render Tree; the Render Tree is the combined result of the DOM and the [...]

The “C” in CSS: The Cascade

2018-11-14T03:05:12+00:00November 14th, 2018|Categories: News, Tutorials|Tags: |

Following up from Geoff’s intro article on The Second "S" in CSS, let’s now move the spotlight to the "C" in CSS — what we call the Cascade. It’s where things start to get messy, and even confusing at times. Have you ever written a CSS property and the value doesn’t seem to work? Maybe [...]

A Bunch of Options for Looping Over querySelectorAll NodeLists

2018-11-13T03:05:44+00:00November 13th, 2018|Categories: News, Tutorials|Tags: |

A common need when writing vanilla JavaScript is to find a selection of elements in the DOM and loop over them. For example, finding instances of a button and attaching a click handler to them. const buttons = document.querySelectorAll(".js-do-thing"); // There could be any number of these! // I need to loop over them and [...]

The ironic inaccessibility of a11y

2018-11-13T03:05:43+00:00November 13th, 2018|Categories: News, Tutorials|Tags: |

This resonated with me: It’s ironic to me that the numeronym “a11y” lacks accessibility: it’s not immediately decipherable by humans who aren’t “in the club”; and, in some fonts, it’s visually indistinguishable from the word “ally” (with lowercase L’s), which can foil searches for clarity. — Eric Meyer (@meyerweb) November 5, 2018 Because I bet [...]

Get References from HTML Built with Template Literals

2018-11-09T03:05:20+00:00November 9th, 2018|Categories: News, Tutorials|Tags: |

One thing JavaScript template literals are great at is little blocks of HTML. Like: // Probably from some API or whatever const data = { title: "Title", content: "Content" }; const some_html = ` ${data.title} ${data.content} `; But that's still just a string. It's not ready to append to the DOM just yet. And what [...]

CSS-Tricks Uses Jetpack

2018-11-09T03:05:19+00:00November 9th, 2018|Categories: News, Tutorials|Tags: |

(This is a sponsored post.) Hey! I made a little page to explain all the ways in which this very site uses the Jetpack WordPress plugin. Here's the gist of it: Our Jetpack subscription gives us VaultPress, which backs up literally everything on this site in real time. That helps me sleep. Jetpack improves our [...]

A Guide to Custom Elements for React Developers

2018-11-09T03:05:16+00:00November 9th, 2018|Categories: News, Tutorials|Tags: |

I had to build a UI recently and (for the first time in a long while) I didn't have the option of using React.js, which is my preferred solution for UI these days. So, I looked at what the built-in browser APIs had to offer and saw that using custom elements (aka Web Components) may [...]

Simplify Styling with Functional CSS

2018-11-08T03:04:42+00:00November 8th, 2018|Categories: News, Tutorials|Tags: |

There is no doubt that "functional CSS" resonates strongly with some people. If that term is new to you, I belive it's come to mean the same thing as "Atomic CSS" as defined by John Polacek here. Harry Nicholls likens it to a function that can only produce one result (although I'd call that a [...]

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok