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

Relearn CSS layout

every-layout.dev

Post reply on HN
Print view View original

11–20 of 187 posts

Re: Relearn CSS layout

#11

Post by RussianCow »

codedokode wrote: post #8
majewsky wrote: post #5

Earlier quoted context omitted.

Flexbox has been supported by all browsers for years now, even by IE11. What on earth do you need to support if you cannot use flexbox?

Caniuse says that IE11 has a lot of bugs regarding flexbox. Firefox supports flexbox only since 2013-2014. So it would make sense to add a simple non-responsive fallback for older browsers. Also, if I remember correctly, the default browser in Windows 7 is IE9. It makes sense to support default browser in the most popular desktop OS. Some of older browsers, released in 2012-2014 support flexbox only with vendor prefi…

caniuse.com also has the combined global market share of IE 6-10 as being only 0.46%, which is completely insignificant for most websites. And I've personally been using flexbox on IE 11 for years with very few issues.

> Some of older browsers, released in 2012-2014 support flexbox only with vendor prefixes

Again, these browsers represent a tiny fraction of the total market. Firefox and Chrome auto-update by default, so there is no reason that someone should be on a version from 2012.

These days it simply doesn't make sense to have a fallback for flexbox unless you're specifically targeting older versions of IE. (And even then, I've had some luck getting flexbox layouts to work on IE 10, even though it's more effort.)

Re: Relearn CSS layout

#12

Post by codedokode »

The code examples are overengineered. For example, the code generator for stack uses rem units and CSS variables, while it could be written without them and have better cross browser support (and the code would be easier to read and maintain in long-term perspective). The author just wants to use modern CSS features without clear rationale for this.

Rem units can cause issues in long term. For example, imagine if a sidebar widget is coded using rems. When later the main font size is changed, margins within widget will change its size, although the font size in it is fixed and didn't change. There are cases when rem is useful and there are cases when it is not, but the author doesn't give a choice and doesn't explain it. He just uses his authority to push his personal preferences to frontend developers who tend to copy the code from tutorials without much thinking.

I recommend using pixels for projects that are going to be maintained and developed in the long term.

Re: Relearn CSS layout

#13

Post by codedokode »

vedantroy wrote: post #4

Out of curiosity, why doesn't the stack layout use flexbox? It seems like flexbox is the perfect fit for such a layout.

Display: block fits better because it has been around for more than 15 years unlike flexbox. And flexbox has no advantages in this case.

Re: Relearn CSS layout

#14

Post by codedokode »

mixmastamyk wrote: post #9
codedokode wrote: post #8

Earlier quoted context omitted.

Caniuse says that IE11 has a lot of bugs regarding flexbox. Firefox supports flexbox only since 2013-2014. So it would make sense to add a simple non-responsive fallback for older browsers. Also, if I remember correctly, the default browser in Windows 7 is IE9. It makes sense to support default browser in the most popular desktop OS. Some of older browsers, released in 2012-2014 support flexbox only with vendor prefi…

Win7 and IE9 are both EOL in six months. Makes sense to drop in new articles.

HTML/CSS was designed to be forward/backward compatible and not to be written only for version of Safari installed on dev's macbook. This is against the spirit of HTML.

Re: Relearn CSS layout

#15

Post by Tomte »

codedokode wrote: post #12

The code examples are overengineered. For example, the code generator for stack uses rem units and CSS variables, while it could be written without them and have better cross browser support (and the code would be easier to read and maintain in long-term perspective). The author just wants to use modern CSS features without clear rationale for this. Rem units can cause issues in long term. For example, imagine if a s…

I find your counter-argument against rem units very weak.

What are cross browser concerns here? Why should he even mention the possibility that someone might "fix" an elements font-size? Sure, the author doesn't explain all of CSS and all of UX/UI in an article focussed on a single issue. That's not a mistake.

Your px recommendation is... strange. The article is one of those "newer" CSS articles that care a lot about responsiveness. You seem not to care. Fine, but I guess you're in the minority there.

Your insult against front-end developers (in both your comments!) is simply childish, and frankly, it seems you just have an axe to grind with the author(s).

Re: Relearn CSS layout

#16

Post by jffry »

codedokode wrote: post #12

The code examples are overengineered. For example, the code generator for stack uses rem units and CSS variables, while it could be written without them and have better cross browser support (and the code would be easier to read and maintain in long-term perspective). The author just wants to use modern CSS features without clear rationale for this. Rem units can cause issues in long term. For example, imagine if a s…

> There are cases when rem is useful and there are cases when it is not, but the author doesn't give a choice and doesn't explain it.

and

> I recommend using pixels for projects that are going to be maintained and developed in the long term.

Directly after lambasting the author for failing to elaborate, perhaps you could go into more depth yourself?

Re: Relearn CSS layout

#17

Post by ctidd »

codedokode wrote: post #12

The code examples are overengineered. For example, the code generator for stack uses rem units and CSS variables, while it could be written without them and have better cross browser support (and the code would be easier to read and maintain in long-term perspective). The author just wants to use modern CSS features without clear rationale for this. Rem units can cause issues in long term. For example, imagine if a s…

On the topic of rems, when using them for layout, you'd use a body font size rather than the root element's font size to control the size of text in your page.

At that point the root font size exists only as a scaling factor, decoupled from the base font size of content within the page, but allowing the user to control that scaling factor via their browser's global default font size preference. In fact, you could think of the rem as root scaling factor unit rather than root font size unit. (The use of the font size property to set the scaling factor is a quirk of the spec.)

This solves the concern you noted on maintainability, while allowing a user to globally opt into larger or smaller text and correspondingly scaled layout across the web, arguably a win for enabling an element of accessibility by default on any website.

Re: Relearn CSS layout

#18

Post by robdachshund »

codedokode wrote: post #12

The code examples are overengineered. For example, the code generator for stack uses rem units and CSS variables, while it could be written without them and have better cross browser support (and the code would be easier to read and maintain in long-term perspective). The author just wants to use modern CSS features without clear rationale for this. Rem units can cause issues in long term. For example, imagine if a s…

What? I use rems for everything. The entire point is that it's a relative unit based on the browser's font size... it makes responsive design incredibly easy.

If I have a container with a rem width and margin 0 auto, that element will remain the same relative size as the screen gets smaller and the margin just gets trimmed. Your media queries can then be very simple.

If I used px, I would need a lot of breakpoints that keep changing the px width to fit the screen.

It sounds like you have never used rems or just don't get the idea.

Re: Relearn CSS layout

#20

Post by robdachshund »

codedokode wrote: post #3

Poor quality articles. They use flexbox and provide no fallback for older browsers. They could use at least non-responsive layout for desktop resolution for older browsers. Probably the reason why they didn't do it is lack of knowledge of CSS.

You do realize that most projects do not target ie11 whatsoever right?

I do mainly ecommerce and private web apps for clients. I have never needed to worry about if one of my users is on any version of internet explorer.

If you are building some enterprise platform for the government or something, sure. But basic sites and apps are not trying to attract 90 year olds on xp using ie6.

I'm not going to avoid using a css feature that is supported by modern browsers that makes my job much much easier.

Post reply on HN