Some of the concepts we are about to see might look a little strange, but hopefully, we'll have some fun.
Quirks mode
<!DOCTYPE html>
If your website misses that doctype (type of document), browsers, such as Firefox or Internet Explorer, go into a transe also known as the quirks mode.
In this alternative state, the box model is incorrect (~ margins, paddings, borders). The laws of Physics do not seem to apply anymore. The following becomes possible:
.111 {
/**/
}
You just entered into a black hole!
Ok, am I going too far ^^?
More seriously, the quirks mode is the bridge between the modern and the ancient times (decades are centuries in this IT business), like if you take a time machine to go back to the late 90s. Your CSS would likely break:
In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.
Source: MDN - quirks mode and standard mode
Developers used to omit the doctype deliberately to force the quirks mode. There is no reason to do that anymore. It's good to know, though, especially for job interviews.
In your pages, don't forget or omit the doctype. Don't even try the following:
<!-- First! -->
<!DOCTYPE html>
The doctype must be the first HTML element.
Doing wtf with emojis
I stumbled uppon that:
<div class="🍌">
That's banana!
</div>
.🍌 {
background: yellow;
padding: .2rem;
}
The first time I saw it, I said to myself:
go home, you're drunk!
But it just works. However, don't use it at work or the sky might fall on your head.
These are chars at the end of the day, but it surprises the first time.
CSS variables
CSS variables are such a great feature.
Thanks to the :root selector, you can specify rules that take precedence over HTML selectors.
Besides, you can write generic variables available in the global scope and reuse them in other selectors.
It's pretty good for maintenance, as you kill many duplicated lines, and you can also override those variables locally in a specific selector.
That's wonderful, and I strongly encourage you to learn CSS variables if you don't use them yet.
However, the following doesn't work for now:
/* assuming there's a global --xl var defined */
@media screen and (max-width: var(--xl)) {}
Indeed, CSS variables can only be used for property values. Moreover, such CSS variables (global scope) are root-based, but media queries are not.
IMHO, it's counterintuitive. I mean, I understand why it's not possible yet, but many developers try that and fail.
If you are interested in this usage, there's a package for that. Not sure it's still maintained, but I like the idea.
Last but not least, neither Internet Explorer nor very old browsers understand CSS variables! Be careful.
Source: caniuse - css variables
CSS tidy
As long as you use the right selector and the appropriate properties, you get your styles. However, is there any specific order?
Should you put that position: relative; before the color: limegreen;? Is it the contrary? How do you write those properties?
There aren't many blog posts and documentation about that, but it becomes necessary for maintenance, primarily when you work in a team (or several).
The best way is to define your guidelines. For your inspiration, you might want to use the following model:
.myelement {
/* positioning */
/* dimensions */
/* text properties */
/* borders & backgrounds */
/* CSS3 magic */
}
It's a kind of magic
I love magic art, but magic it's not something I expect from any language. CSS is neither a programming language nor a design program such as Photoshop.
It's somewhere between these two worlds, and to me, that's the reason why so many developers find it weird.
There are easy ways to log errors in programming languages. You get notices, warnings, or fatal errors, so it's logical and relatively easy to see why your code does not make sense.
It's not the same with CSS. You don't get any tracks. In addition to this, you have to write instructions for a massive range of devices and screen sizes. You can only make reasonable assumptions of the final result.
There are online tools to check the layout shift, for example. If you get a bad score, you'll have some hints to improve your styles, but it won't solve all your problems.
The Transformers
I've been playing with the transform-origin property recently.
It's amazing, but I agree with this guy, transform is a little weird as its values do entirely different types of things, including 3D stuff.
People sometimes use those transformations to make great art, and it can be impressive, but it may look like witchcraft at first sight.
Anyway, transforms are an excellent approach because it's often better than trying extreme positions and margins, which can harm your performances and look terrible on some devices.
You can combine multiple transforms at a time.
Conclusion
I hope you enjoy this weird CSS trip. There are many ways to learn CSS and take the power back with your styles, but some parts remain pretty hard.
Fortunately, some people share knowledge, especially modern ways to write CSS.
Who wants to become a "CSS developer"? I'm surprised nobody uses that because I've seen people building crazy good styles that require expert knowledge.
Top comments (5)
Wait. You can use emojis in class names????
It's a miracle this even works.
you can also use emoji with CSS variables: dev.to/afif/what-no-one-told-you-a...
nice, I did not know that.
That video you linked to has a real gem that I have never heard phrased that way before. CSS describes your intent for a design, rather than the steps to reproduce it.
I mean, we all know this but having it phrased that way does make you sit and think about it properly and try and get away from "pixel perfection" so many of us attempt to achieve.
Yeah, that's one of kind, and you can watch the whole series. Really advanced expertise.