SVG Properties and CSS

There’s a good deep dive into SVG Properties and CSS on CSS-Tricks: SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner …

CSS-Only Multiple Choice Quiz

Matthew Somerville: I followed a link to one of those Guardian end-of-year quizzes on my phone, and had answered a few questions before realising that it was working entirely without JavaScript (I have JavaScript disabled on my phone). I found this very impressive, well done whoever worked on that, and so I thought I would …

Understanding positioning in CSS

Chen Hui Jing: Everything on the web is a box. The positioning algorithms used to calculate the position of a box on the page is determined by the position and float properties. I’ll try my best to explain this in a way that makes sense. But first, let’s look at them individually. Good introductory post …

Print to CSS – Magazine layouts recreated with CSS Grid

Just like Jules Forrest before, Dan Davies has recreated some magazine layouts using CSS Grid: I’m a huge fan of magazine layouts, the use of typography, the structures, just the general look. I also love CSS Grid and as part of my learning, I have been looking at magazines for inspiration so I decided to …

RTL Styling 101

Ahmad Shadeed created this extensive RTL reference. Over 292 million people around the world speak Arabic as their first language. Arabic is my native language, and I sometimes build websites that need to support both left-to-right (LTR) and right-to-left (RTL) styles. Be sure to read the section on CSS Logical Properties too, as that will …

The unseen performance costs of modern CSS-in-JS libraries in React apps

Aggelos Arvanitakis, writing for the Web Performance Calendar 2019 edition: Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on …

Smoother & sharper shadows with layered box-shadows

If you try to capture the subtleties of a real shadow with box-shadow then, well, you’re pretty much out of luck. The box-shadow CSS property isn’t exactly built to encourage expressiveness. But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control …

How the CSS :is() selector will simplify things

One of the selectors in CSS Level 4 is :is(). It is the successor to :any() and :matches() (which are supplanted by :is()): The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for …

Fullwidth Content Strips and CSS Subgrid = ❤️

When having fullwidth content strips on your site CSS Grid is a thankful piece of technology. You can use it to place items between the first and last grid-line, as detailed in Breaking Elements out of Their Containers in CSS 💁‍♂️ Alternatively you can also use this .full-bleed utility class To lay out the content …