Better 'safe' than sorry
Did you know that one of the goals with CSS is to prevent data loss? The goal of CSS is to keep content and elements visible to the user and does this by design, most of the time.
Read vibeGood Vibes Only is owned by me, Jessica, and I work as a freelance front-end developer. I write about things I’ve experimented with and thoughts I like to share, focusing on creativity and CSS.
I have a love for CSS because it’s what makes the web look interesting and fun!
Did you know that one of the goals with CSS is to prevent data loss? The goal of CSS is to keep content and elements visible to the user and does this by design, most of the time.
Read vibeIn every job advertisement in the market, there's a superset of skills we aim to match. A whole bunch of tech references and frameworks. So, which one of them is the most important to have as a superpower? None, if you ask me.
Read vibeYou know those companies that have abbreviations for everything that you can hardly spell or pronounce? Well, guess what? We have the same in CSS! Allow me to introduce you to the siblings ‘cqw’ and ‘cqh’. ‘cqw’ stands for a percentage of the width of the container query and ‘cqh’ naturally represents a percentage of the container’s height. Take a look at this CSS.
.container {
container-type: inline-size;
}
.child {
padding: 3cqw;
font-size: 3cqw;
border-radius: 0.5rem;
}
This means that we have a container with a child in it, and both the padding and the font-size will be 3% of the container’s width. This opens up for a very versatile responsive layout where we can place the child in a wide main section where it stands out distinctly, or in a small sidebar where the font and padding will adjust themselves to align well with the surroundings.
We have the possibilities to make stuff really responsive. We just have to learn the tools!