5 ms·

CSS is used for two purposes: for styling and for layout. In my mind, the value obtained by using CSS for larger site layouts is not much. Usually, the claim is

by ashu 19y ago

CSS is used for two purposes: for styling and for layout. In my mind, the value obtained by using CSS for larger site layouts is not much. Usually, the claim is that CSS layouts help you re-target the content for another device and stuff, easily. Based on my experiences, I think that's a grand dream not likely to come true. You have almost completely re-think your UI when you are developing for a different device. Re-using CSS layouts is nearly impossible for that.

ericb 19y ago
I agree. CSS as a layout system is poorly thought out and even more poorly implemented. Why, to center an object, do I have to remember trivia like "the parent needs a width." You need hacks and non-intuitive tricks for cross-browser CSS. Tables are verbose, but they "just work" more often. I still use CSS layouts, but man what a steaming pile.
- run4yourlives 19y ago
  >Why, to center an object, do I have to remember trivia like "the parent needs a width." Because you're still viewing the page as a table. Once you stop doing this, you stop asking questions like these.
  - ericb 19y ago
    I'm open to new perspectives. In what way I should I see the page such that "center me in my parent" is unreasonable unless the parent has a fixed width? What, in particular, about the box model makes this impossible?
    - run4yourlives 19y ago
      The notion of "center" doesn't exist without a width. Now, you could give the object in question a width and simply give it margin-left/right: auto. That would center it in the width-less parent, but it wouldn't fix its position to the particular spot you're currently seeing it in. For understanding, take it up to the highest level, the browser window. Make your browser 1024x768. Now make it bigger or larger - where is the "center"? It's moved depending on the size of the browser window. If you have a parent whose width is variable, you can't center the child. The key is that, unlike years of using tables to hack up a website, the canvas CSS uses is variable; its height and width is undefined. Thinking of it like this, it makes perfect sense that center isn't used.
      - palish 19y ago
        I don't follow. At any instant in time, every element on a webpage has a well-formed width. So why can't a child be centered, using that width?
        run4yourlives 19y ago
        >At any instant in time, every element on a webpage has a well-formed width. That's not exactly true. Every block element has a width, but inline objects do not. Furthermore, some block elements may have fixed widths, while others may be designed to take up as little as they require. The "center" attribute that you describe would run counter to the visual formatting model of the standard that is in place to support a number of other things. That would mean that its behaviour would be next to impossible to design around if you were trying to account for all of your users screen sizes at the same time. See here: http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block
        palish 19y ago
        That would mean that its behaviour would be next to impossible to design around if you were trying to account for all of your users screen sizes at the same time. See, there's where we differ. I'd like to easily design a webpage that renders fine on 90% of my user's screens. I'd bet 90% of my users will be using personal computers, and use a resolution between 800x600 and 1920x1200. Want to look at my page on your non-iPhone? I'd love to introduce you to the m.mypage.com section of my site. Something like "Center a child relative to a parent" isn't hard to do (we do it at work for our video game GUI), and it really seems like a few architecture astronauts got ahold of the CSS standards to cause these API usability problems. Also, arguments like "You can't do that simple thing because.." are starting to sound like the arguments C++ pundits use to justify its monstrous complexity compared to C.
        run4yourlives 19y ago
        I never said you couldn't do it, you just can't do it the way you prefer: parent {} child{ margin-left: auto; margin-right: auto; width: 100px; }
run4yourlives 19y ago
>You have almost completely re-think your UI when you are developing for a different device. Re-using CSS layouts is nearly impossible for that. You don't re-use the CSS, you re-use the HTML. That's the point. All it needs is a new style sheet, not a whole new webapge.
- randallsquared 19y ago
  I expect that by "CSS layout", they meant "HTML which is laid out by CSS".
  - run4yourlives 19y ago
    Even if they did, you can basically re-do the entire UI without touching the HTML if you separate presentation from it by using CSS.
    - randallsquared 19y ago
      I'll agree that that's the ideal, but I've also found that designers and clients are good at coming up with layouts for which it is far simpler to change the HTML than to try to contort it into the right places with CSS.

by ashu 19y ago

ericb 19y ago

I agree. CSS as a layout system is poorly thought out and even more poorly implemented. Why, to center an object, do I have to remember trivia like "the parent needs a width." You need hacks and non-intuitive tricks for cross-browser CSS. Tables are verbose, but they "just work" more often. I still use CSS layouts, but man what a steaming pile.

run4yourlives 19y ago
>Why, to center an object, do I have to remember trivia like "the parent needs a width." Because you're still viewing the page as a table. Once you stop doing this, you stop asking questions like these.
- ericb 19y ago
  I'm open to new perspectives. In what way I should I see the page such that "center me in my parent" is unreasonable unless the parent has a fixed width? What, in particular, about the box model makes this impossible?
  - run4yourlives 19y ago
    The notion of "center" doesn't exist without a width. Now, you could give the object in question a width and simply give it margin-left/right: auto. That would center it in the width-less parent, but it wouldn't fix its position to the particular spot you're currently seeing it in. For understanding, take it up to the highest level, the browser window. Make your browser 1024x768. Now make it bigger or larger - where is the "center"? It's moved depending on the size of the browser window. If you have a parent whose width is variable, you can't center the child. The key is that, unlike years of using tables to hack up a website, the canvas CSS uses is variable; its height and width is undefined. Thinking of it like this, it makes perfect sense that center isn't used.
    - palish 19y ago
      I don't follow. At any instant in time, every element on a webpage has a well-formed width. So why can't a child be centered, using that width?
      - run4yourlives 19y ago
        >At any instant in time, every element on a webpage has a well-formed width. That's not exactly true. Every block element has a width, but inline objects do not. Furthermore, some block elements may have fixed widths, while others may be designed to take up as little as they require. The "center" attribute that you describe would run counter to the visual formatting model of the standard that is in place to support a number of other things. That would mean that its behaviour would be next to impossible to design around if you were trying to account for all of your users screen sizes at the same time. See here: http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block
        palish 19y ago
        That would mean that its behaviour would be next to impossible to design around if you were trying to account for all of your users screen sizes at the same time. See, there's where we differ. I'd like to easily design a webpage that renders fine on 90% of my user's screens. I'd bet 90% of my users will be using personal computers, and use a resolution between 800x600 and 1920x1200. Want to look at my page on your non-iPhone? I'd love to introduce you to the m.mypage.com section of my site. Something like "Center a child relative to a parent" isn't hard to do (we do it at work for our video game GUI), and it really seems like a few architecture astronauts got ahold of the CSS standards to cause these API usability problems. Also, arguments like "You can't do that simple thing because.." are starting to sound like the arguments C++ pundits use to justify its monstrous complexity compared to C.
        run4yourlives 19y ago
        I never said you couldn't do it, you just can't do it the way you prefer: parent {} child{ margin-left: auto; margin-right: auto; width: 100px; }

run4yourlives 19y ago

>You have almost completely re-think your UI when you are developing for a different device. Re-using CSS layouts is nearly impossible for that. You don't re-use the CSS, you re-use the HTML. That's the point. All it needs is a new style sheet, not a whole new webapge.

randallsquared 19y ago
I expect that by "CSS layout", they meant "HTML which is laid out by CSS".
- run4yourlives 19y ago
  Even if they did, you can basically re-do the entire UI without touching the HTML if you separate presentation from it by using CSS.
  - randallsquared 19y ago
    I'll agree that that's the ideal, but I've also found that designers and clients are good at coming up with layouts for which it is far simpler to change the HTML than to try to contort it into the right places with CSS.