はてなブックマーク

The lack of good ways to vertically center elements in CSS has been a dark blemish on its reputation for pretty much its entire existence. What makes matters worse is the techniques that do work for vertical centering are obscure and unintuitive, while the obvious choices (like vertical-align:middle) never seem to work when you need them. The current landscape of vertical centering options ranges

Click the button below to hide the contents of this page. Notice how the footer sticks to the bottom of the window even when there’s not enough content to fill the page. Toggle Contents Getting the footer to stick to the bottom of pages with sparse content is something just about every Web developer has tried to tackle at some point in his or her career. And, for the most part, it’s a solved probl

Most grid systems today use one of two layout methods: float or inline-block. But neither of these methods were really intended to be used for layout and as a result have pretty significant problems and limitations. Using floats requires clearing them which has a whole host of layout issues, most notoriously that clearing an element sometimes forces it below an unrelated part of the page (take thi

And the future of CSS Philip Walton / @philwalton Some quick disclaimers This talk is not an introduction to Web Components. This talk is not intended to be a how-to guide or a tutorial. Instead, I'm going to talk about some high-level concepts, hopefully get you thinking, and then you can go explore these issues on your own. What makes CSS hard? The usual answers: Vertical centering Equal height

The media object is the poster-child of Object Oriented CSS (OOCSS). Its simplicity and utility have converted many a CSS developer (myself included) to the OOCSS methodology. But like most CSS layout techniques, the media object must resort to tricks and hacks to accomplish its goals. The media object’s body must prevent text from wrapping below the image by either creating a block formatting con