Blog / Css

Here’s a quick trick to display content as accordions on mobile but as static content on desktop, using the details html tag. Read more

Once a year, there comes a time when I get bored of using my usual code editor and like to try something new. This time it was Panic’s Nova code editor. Read more

If you’re a web developer, you may have already heard that some CSS selectors are faster than others. In this article by Microsoft, they explain how to optimise CSS better by improving CSS selector performance. A must-read if you are working on Google’s Core Web Vitals. Read more

I totally agree with this article. It’s all too easy for developers to reach for UI frameworks like Bootstrap with the hope of saving time, but it’s never the case. I’ve used a UI framework twice in my 20+ year career, and all it gave me was a headache and unnecessary website bloat. Read more

Drop caps have been used in printed media for a long time to add styling to the first letter of the first paragraph of piece of content. Read more

I’m not sure why anybody, developer or not, would want to turn off/hide scrollbars on a desktop. This macOS setting has always puzzled me. Read more

I’ve been using Sass for a few years now, and I’ve gotten so used to using it on new projects, I never gave it a second thought. I thought it was making my life easier, but it’s caused me more hassle than it’s worth in recent weeks. Read more

I wasn’t aware of the CSS is() pseudo-class, but this would help avoid that much-hated selector duplication. Read more

A brilliant post about how important HTML and CSS truly are today more than ever. I’ve been watching the JS and React craziness going on over the last few years and have refused to take part. The fundamentals of the web are, and always will be, HTML and CSS. Without these at the core, JS, React, or even PHP (or any other web-based language for that matter) would not even exist. Read more

The paragraph you are reading right now is styled differently from the rest of the paragraphs down below. This only applies if there are more sibling paragraphs below. Read more

In my previous post, I mentioned that I’d added an archive page containing images of old work to my website. To build this, I decided to use CSS columns to create a masonry-style layout without using complex JavaScript or frameworks - just plain old CSS and HTML. Read more

Interesting idea on creating full-bleed layouts using css grid - not something I ever thought off using for this type of layout, but definitely a great idea! Read more

A great article about using flex-basis and flex-wrap instead of media queries when creating components. Read more

I’ve used min() and max() in CSS many times, but I wasn’t aware of clamp(), which looks amazing for typography! This youtube video by Kevin Powell shows a great example of them in use. Read more

I love the new desktop design of Gmail but I find the font size of the message composition window to be too small. Amazingly Google hasn’t added any options to change the font size other than providing the default “small”, “normal” and “large” (which is too large) choices. Read more

HTML5 introduced the new range form element that is perfect for creating sliders with min and max values. Read more

There’s over 100 CSS colour names, most of which are unknown. You can find all of them here. Read more