3 ms·

It's not that it's difficult, really, but the tools are incredibly underpowered. For example: * How do you vertically center an arbitrary element inside anothe

It's not that it's difficult, really, but the tools are incredibly underpowered. For example: * How do you vertically center an arbitrary element inside another where you don't know the height of any of them? Answer: The only reliable way is via "display: table-cell". It has several annoying limitations. * How do you ensure that several horizontally adjacent boxes fill the width of the container and are all of equal height, regardless of their contents? Answer: Table again, but it's not always possible without JS because of how height percentages are calculated. (Also, all browsers including Chrome implement "height: 100%" differently.) * How, given N elements arranged horizontally next to each other, do you ensure that they (1) fill the width of the container, (2) if they become too narrow (ie. min-width), any element(s) that don't fit will wrap below? (Note: Rule #1 must apply; when one element doesn't fit, the preceding "line" must expand to fit the full width of the container.) Answer: Not possible in CSS alone. * How do you ensure that an element (eg., an image) of arbitrary width is always has the same height as it's width? (For example, imagine a grid which should expand to fit the window, and all cells should be quadratic.) Answer: With images, possible with an unintuitive "height: 0; padding-bottom: 100%" hack, not for other elements without JS. * How do you center an absolutely positioned element of arbitrary width and height (think tooltip or speech balloon)? Answer: JS. * How do absolutely position an element without specifying a width, so that the width becomes the minimum needed to display all of its contents up to a max-width? For example, a box saying "Hello" should take up the space required by that word and no more. Answer: Not possible in CSS alone, although you would have thought that "display: inline-block" would work. Firefox actually does it, Chrome/WebKit don't. * How do you have an absolute element be the same width as another element? For example, a drop down menu should be at least the width of its menu item, and an autocomplete box should at least be the width of its input box. Answer: JS. * How do ensure a label is vertically centered on the same text baseline as an adjacent textarea? Answer: Textareas are considered blocks, not text, so you cannot without computing the baseline and using padding or negative margins, and that is imprecise. These are just a few basic real-world layout challenges. They should not be challenges, they should be simple to implement, but CSS doesn't help; it gets in the way more than it aids. In some cases, inconsistent browser implementations result in wildly different rendering. The result is JavaScript to fill the holes, and sometimes just to say "screw this, I will do in code".

bennettfeely 12y ago
1. Flexbox, through the align-items property. 2. Flexbox, setting flex: 1; to the boxes. Can be done vertically or horizontally. 3. Flexbox, setting flex: 1; to boxes. Setting a min-width to a flex-item takes precedence so it will be honored. 4. You got me. I remember hearing talk about an aspect-ratio property. I'm not sure if the object-fit/object-position properties get the job done. The hacks will have to continue for now. 5. left: -50%; and margin-left: 25%; will work. See: http://codepen.io/bennettfeely/pen/LktDi http://codepen.io/bennettfeely/pen/LktDi 6. width: content-width;? I don't know how the browser support is there, however. It may be possible. 7. Same width as what element? The parent? Set position: relative; to the parent and top: 0; right: 0; to the child. 8. That seems like a real edge case and maybe a bug. I'm not sure. I hope that I got at least a few of those right but CSS and browsers are consistently getting faster and more powerful and the answer to tricky layouts is increasingly not "just use JS". Flexbox is now supported by all the browsers and solves a whole lot of layout problems that designers/developers have wrestled with.
- xenadu02 12y ago
  Right, but flexbox is fairly new. CSS sucked because it made the most common things people want to do really really difficult. Most people gave up and went back to tables because tables give you an understandable grid layout with trivial effort. CSS is just now starting to make the most common layouts easier.
- lobster_johnson 12y ago
  Flexbox would solve a lot of these, but it's not supported by enough browsers to be usable, afaik. Are people using it in production? Re #5, I managed to leave out the important part. I mentioned tooltip because I was going to write: ...where the element is placed _above_ another arbitrary element. This is impossible, and raises problems such as escaping "overflow: hidden" and what if the position goes beyond the viewport. 6: In theory, but it is apparently not supported by all browsers. 7: Not the parent, but an arbitrary element. For example, let's say I have an input field. I want to show an autocompletion dropdown box. The box should be at least the width of the input field. It must be absolutely positioned. The parent container of the input field may have "overflow: hidden", too. (Overflow handling is really a broken concept that screws up a lot of CSS, because there is no way to escape it. Z-index is another awful one.) Last pet-peeve: Floats depend on their order in the DOM. A float-right element must be placed before any non-float element in order to position itself vertically to be aligned with the parent box.

bennettfeely 12y ago

1. Flexbox, through the align-items property. 2. Flexbox, setting flex: 1; to the boxes. Can be done vertically or horizontally. 3. Flexbox, setting flex: 1; to boxes. Setting a min-width to a flex-item takes precedence so it will be honored. 4. You got me. I remember hearing talk about an aspect-ratio property. I'm not sure if the object-fit/object-position properties get the job done. The hacks will have to continue for now. 5. left: -50%; and margin-left: 25%; will work. See: http://codepen.io/bennettfeely/pen/LktDi http://codepen.io/bennettfeely/pen/LktDi 6. width: content-width;? I don't know how the browser support is there, however. It may be possible. 7. Same width as what element? The parent? Set position: relative; to the parent and top: 0; right: 0; to the child. 8. That seems like a real edge case and maybe a bug. I'm not sure. I hope that I got at least a few of those right but CSS and browsers are consistently getting faster and more powerful and the answer to tricky layouts is increasingly not "just use JS". Flexbox is now supported by all the browsers and solves a whole lot of layout problems that designers/developers have wrestled with.

xenadu02 12y ago
Right, but flexbox is fairly new. CSS sucked because it made the most common things people want to do really really difficult. Most people gave up and went back to tables because tables give you an understandable grid layout with trivial effort. CSS is just now starting to make the most common layouts easier.
lobster_johnson 12y ago
Flexbox would solve a lot of these, but it's not supported by enough browsers to be usable, afaik. Are people using it in production? Re #5, I managed to leave out the important part. I mentioned tooltip because I was going to write: ...where the element is placed _above_ another arbitrary element. This is impossible, and raises problems such as escaping "overflow: hidden" and what if the position goes beyond the viewport. 6: In theory, but it is apparently not supported by all browsers. 7: Not the parent, but an arbitrary element. For example, let's say I have an input field. I want to show an autocompletion dropdown box. The box should be at least the width of the input field. It must be absolutely positioned. The parent container of the input field may have "overflow: hidden", too. (Overflow handling is really a broken concept that screws up a lot of CSS, because there is no way to escape it. Z-index is another awful one.) Last pet-peeve: Floats depend on their order in the DOM. A float-right element must be placed before any non-float element in order to position itself vertically to be aligned with the parent box.