This is a follow-up on a previous post about 3 New Additions to CSS in 2023. Last time, I discussed a set of new CSS features that have recently become widely available in modern browsers. Today, let's delve into the most anticipated changes that are expected to release some time during 2024.
CSS Grids er nå godt støttet av alle moderne nettlesere. Hensikten med Grids er å designe layouts over to dimensjoner. Men uansett hvor mange dimensjoner, ender jeg nesten alltid opp med å ty til en Flexbox.
The web is constantly evolving, and CSS is no exception. The last few years have given us widely supported features such as Grids, Variables (Custom properties) and New viewport units – among other improvements.
Julen står for døren, men det er ikke bare gaver vi pakker inn. I årevis har kanskje ditt verktøyvalg for å pakke inn elementer falt på border. Men hva om jeg fortalte deg at det finnes en mer fleksibel og layout-vennlig egenskap enn dette? Denne guiden vil utforske hvordan box-shadow kan brukes som et alternativ til tradisjonelle borders, og hvordan dette kan hjelpe oss å unngå layout-problemer.
Christmas is at the door, but not only presents are being wrapped. For years your tool of choice for wrapping elements has been border. But what if I told you there exists an even more flexible and layout friendly property than this? In this guide we will explore how box-shadow can be used as an alternative to traditional borders, and how it can solve our layout problems.
Teamet mitt startet nylig å skrive CSS. Vi er ferdig med superspråk som kompilerer ned til CSS. Vi bruker ikke noen rammeverk, men skriver gode, gamle CSS-regler. Det er på tide å forenkle hvordan vi tenker på styling.
Nettsider med animasjon får litt personlighet, og det skal lite til for å oppnå det. Her er en guide til bruk av CSS-transitions.
Having sufficient contrast in your website is one of those things which are very important but still very boring to fix—especially if your site uses multiple background colours. Well, be bored no more! color-contrast() is (hopefully soon) here to save us! Let's learn what it does.
So, you've heard talk of a so-called :has() selector, but don't really know what it is. Or maybe you just clicked the article hoping to learn something new. Well, this article is for you! Now that :has() is supported by almost all major browsers (except Firefox where you need a feature flag …), it is time to learn what it is, why you should care and how you use it.
Style Dictionary is one of the very best tools I've ever encountered. It's powerful, fun, and great for managing your design tokens!
Web har alltid vært en plattform hvor innholdet må tilpasse seg forskjellige skjermer og skjermteknologier. Media queries har gjort det mulig for oss å tilpasse designet vårt til denne hverdagen, men i en hverdag hvor vi skriver flere og flere komponenter strekker ikke media queries alltid til. Møt CSS container queries, et nytt standard-forslag som endelig skal la oss kode komponenter uavhengig av resten av designet!
The field of computer science is moving forward at an extraordinary pace. The phone in your pocket is becoming much more advanced thanks to these feats of engineering. The greatest challenge that everyone faces, however, is coming up with names in programming. Despite the massive accomplishments in AI and machine learning, the most difficult part of these tasks are, I believe, coming up with good names. BEM does not solve this issue, but it makes it easier by many degrees, and with the addition of a CSS preprocessor, it can make your CSS-code more readable and hierarchically sound than before.
Santa needs your help. The usually ever so helpful elves have decided to play a trick on him, and have made all the toys run around, resisting getting wrapped in the lovely Christmas wrapping paper he just spent all day picking out. Can you help Santa catch and wrap all of them? See the Pen <a href='https://codepen.io/mfeiring/pen/eYmJNZy'>CSS Christmas game</a> by Mira Feiring (<a href='https://codepen.io/mfeiring'>@mfeiring</a>) on <a href='https://codepen.io'>CodePen</a>.
This day is going to be all about blending colors, or rather how you can do blending in CSS with mix-blend-mode! Those of you that have limited experience playing around with colors may wonder what blending is. It’s quite simple, blending is when you mix two colors together in order to get a new color - and yes, it’s exactly like when you played around with color tubes in kindergarten!
10 years of writing CSS has taught me one important lesson - there's always new ways to screw up. Let's look at some of the ways I've failed in the last decade.
Let's get hands on with grids!
Yesterday, we showed how to empower our users to stop our long running animations. But why force our users to manually stop animations, when they are screaming at us that they do not want animations!
Animations can be what sets your website apart, and really makes your users happy. It shows that you have gone that extra mile to create something really special, often with great care, and oftentimes, depending on the animation, with great effort.
Did you know that you might be required by law to create accessible websites? In many countries, government agencies has been required to create websites that comply with WCAG 2.0 for a long time, and in for instance Norway, this requirement also apply for private companies. For a general introduction to accessibility, I recommend reading the article from day 6 in our UX Christmas calendar, and to see all the technical tidbits involved, I recommend going through the checklist found at https://www.wuhcag.com/wcag-checklist/. As this is a CSS Christmas calendar, let’s focus on the stuff we control using CSS, and today, it is all about keeping focus!
There is a display property that goes hand-in-hand with CSS grid: display: contents. With this property you can keep good HTML semantics when using CSS grid. Let's see how.
Grid layouts are nice until you need to do something slightly outside of its bounds. Want to learn a quick trick to escape?
How words are broken when lines overflow their containers is not always trivial and can cause many a headaches. Hyphens is a CSS property used to help with this, but how does it actually work and what can it do for us?
Many developers hesitate to use CSS Grid in their project. A typical argument is that Grid is not supported in all browsers. But that's not true!
In yesterday's post, I listed some of the general tips I use when I try to write clean CSS code. Today, I'll try to be a bit less fluffy and instead show some detailed tips you can start applying to your projects right away. Ready? Here we go.
Over the years I've seen (and indeed written) quite a lot of horrible CSS, and I want to take a moment to share some of the rules and principles I try to follow when I write and teach CSS in order to keep the code as clean and maintainable as possible. In this post, I'll go through some general tips before I'll get into some more specific tips in tomorrow's post. Let's go!
It’s been six months since I’ve been introduced to CSS Grid and I just can't stop sharing how useful it is! It’s amazing when you’re in the need of a responsive layout!
Custom properties doesn't look like much, but is one of the real super powers of CSS. Let's see what it's all about!