Learn CSS layout the pedantic way (2015)
book.mixu.net
Learn CSS layout the pedantic way (2015)
1–10 of 106 posts
Re: Learn CSS layout the pedantic way (2015)
#2written before css grid and css columns?
another z-index one:
https://philipwalton.com/articles/what-no-one-told-you-about...
Re: Learn CSS layout the pedantic way (2015)
#3What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.
Re: Learn CSS layout the pedantic way (2015)
#4What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.
Learn flexbox. Learn the box model (especially when to use margin vs padding). Learn how style cascading works (and why we use SCSS and component development to mostly avoid thinking about it). Learn media queries and how to target different screen sizes. Most of all, don't ever feel badly about doing a web search “how to do x in css”, the spec is huge with tons to remember and you won’t memorize everything without using it regularly for an extended period of time.
Re: Learn CSS layout the pedantic way (2015)
#5written before css grid and css columns? another z-index one: https://philipwalton.com/articles/what-no-one-told-you-about...
Yeah, according to https://book.mixu.net/ this was written in 2015, at nine years old I'd be worried about this not being super useful for modern CSS.
Re: Learn CSS layout the pedantic way (2015)
#6Totally aside, but the article reminded me. Does anyone remember when Firefox showed you the stacking context of elements on a web page? It had an exploded 3d view of all layers on a web page.
Not sure if any extensions or browsers still have that feature?
Re: Learn CSS layout the pedantic way (2015)
#7What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.
What do you mean by "official documentation"? The specification [1]? MDN [2]?
[2] https://developer.mozilla.org/en-US/docs/Web/CSS
The former is not meant as a learning resource for new web devs. And the latter (which is neither official nor authoritative) usually has information about the "baseline" support and browser compatibility tables.
Re: Learn CSS layout the pedantic way (2015)
#8What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.
I've found the best way is to build things over and over again. That may reflect a certain learning style but actually manipulating styles and layouts really helps hammer home the practical aspects of how it works.
I also approach writing CSS with the goal of writing as little as possible. Not because I don't like it - I tend to think it gets an unfairly bad rap - but because it teaches you how to more effectively style layouts without layering too many declarations.
Re: Learn CSS layout the pedantic way (2015)
#9Totally aside, but the article reminded me. Does anyone remember when Firefox showed you the stacking context of elements on a web page? It had an exploded 3d view of all layers on a web page. Not sure if any extensions or browsers still have that feature?
I believe Edge has something like that now, though from what I've heard it works slightly differently.
Re: Learn CSS layout the pedantic way (2015)
#10What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.
> what is actual and what is not
Heh, off-topic, but this is one of my favourite "EU English"-isms: using actual to mean current.
Completely understandable, given how e.g. the Dutch translation of current is actueel (whereas the translation of actual is daadwerkelijk).
Anyway, maybe this is even helpful if a native speaker is confused :)