Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS layout the pedantic way (2015)

book.mixu.net

Post reply on HN
Print view View original

21–30 of 106 posts

Re: Learn CSS layout the pedantic way (2015)

#21

Post by Tomte »

Vinnl wrote: post #10
lesser_value wrote: post #3

What 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 :)

Yes, first example in https://en.m.wikipedia.org/wiki/Euro_English under Vocabulary.

Re: Learn CSS layout the pedantic way (2015)

#22

Post by ramesh31 »

lesser_value wrote: post #3

What 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 the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.

Don't approach it as a programming language to be "learned" by reading the docs. Just open an inspector and start fiddling.

Re: Learn CSS layout the pedantic way (2015)

#23

Post by farleykr »

lesser_value wrote: post #17
farleykr wrote: post #8

Earlier quoted context omitted.

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 st…

I feel like this type of thinking is why 99% of people don't understands css though, when you are just building things you make up rules that don't exist and ignore the ones that do. And its not as straight forward as programming languages are so its very hard to tell when something is "wrong".

Yeah, maybe my suggestion could've been better stated. I'm not suggesting that you can ignore documentation and other forms of writing that explore paradigms and methodologies. I meant there's only so much you can read before actually writing CSS and practicing making layouts becomes a necessary part of learning CSS in depth.

And, to play devil's advocate a little: You can't make up a rule that doesn't exist. Either your CSS will work or it won't. And if it works it's not wrong.

Re: Learn CSS layout the pedantic way (2015)

#24

Post by simlevesque »

MyFirstSass wrote: post #18
quidgybozo wrote: post #6

Totally 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?

Chrome and Safari has the Layers panel in devtools that is actually a 3d model you can rotate but it's very simple compared. But yeah i also remember that feature fondly and if anyone has a better tool i'd be very interested! Super weird it isn't more used, but then again it's weird there isn't more 3d / 2d diagramming being standard in programming.

I hate that every time that I want to use it to fix something I feel like I wasted my time. And then I remember Firefox's implementation and I want it back.

Re: Learn CSS layout the pedantic way (2015)

#25

Post by sesm »

The first thing that should be explained about CSS layout, is that it has 4 different layout systems:

- table, the oldest one, still used for email

- float, for articles with inline images

- flexbox, most used one today

- grid, modern alternative to table

There is also absolute and fixed positioning as a hack to bypass layout.

Re: Learn CSS layout the pedantic way (2015)

#26

Post by dzolob »

Vinnl wrote: post #10
lesser_value wrote: post #3

What 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 :)

In spanish, current translates to actual.

Re: Learn CSS layout the pedantic way (2015)

#27

Post by shubhamjain »

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1]

> I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and container queries were shipped. Several of the newly added properties handle cases so specific that I hardly believe I would ever use them (hanging-punctuation and font-palette, for example).

> Here’s more: there are at least three properties related to hyphenating paragraphs. You might have used the filter property, but did you know that it supports an entirely different class of filters using SVG? Or that you can tweak the image scaling algorithm? Or border-radius support elliptical corners?

Of course, you can say that about any technology, but CSS is different. It handles too many things, in too many ways, and changes too much, too fast.

[1]: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

Re: Learn CSS layout the pedantic way (2015)

#28

Post by [deleted] »

sesm wrote: post #25

The first thing that should be explained about CSS layout, is that it has 4 different layout systems: - table, the oldest one, still used for email - float, for articles with inline images - flexbox, most used one today - grid, modern alternative to table There is also absolute and fixed positioning as a hack to bypass layout.

[deleted]

Re: Learn CSS layout the pedantic way (2015)

#29

Post by paulddraper »

shubhamjain wrote: post #27

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and contai…

Could be worse.

Could be LaTeX.

Re: Learn CSS layout the pedantic way (2015)

#30

Post by rchaud »

argulane wrote: post #14
quidgybozo wrote: post #6

Totally 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?

Yeah they removed it sometime ago https://firefox-source-docs.mozilla.org/devtools-user/3d_vie...

This is cool! I understand why they removed it, but is there a browser extension that retains this functionality on modern versions of FF?
Post reply on HN