A rather geeky/technical weblog, est. 2001, by Bramus
Early March the first Editor’s Draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors) This module describes support for nesting a style rule within another style rule, allowing the inner …
Another CSS Grid Layout by Olivia NG. Be sure to check more CSS Grid Layouts in her CSS Grid Experiments collection on CodePen. Some nce CSS Grid: Floor Plan →CSS Grid Experiments Collection →
position: sticky; with overflow: scroll;Figure: position: sticky; and overflow: scroll;, a quirky combination … but it can be fixed! Dannie Vinther: Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within …
Continue reading “Combining position: sticky; with overflow: scroll;“
Worth a peek, to see how it’s built. I like how the .cells__number cells are locked to the first column, independent of their order in the source code: grid-column: 1 / span 1; CSS Grid: Excel Spreadsheet →
Ire Aderinokun on why you should use the :lang pseudo-class over the lang attribute selector (e.g. [lang]) for language-specific styles: The problem with having language-specific styles based on the [lang] attribute selector is that the selector isn’t actually aware of the language of the element. It’s just like any other “dumb” attribute selector. This can …
Continue reading “Multilingual Sites: Styling translated text”
Great work by Heydon Pickering, in which he lets a flexbox layout respond to the size of its container, and not the viewport Sometimes you want your items to wrap in a very particular way. For instance, when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. …
shape-outside ExperimentsI like these pens by Kristopher Van Sant using shape-outside to wrap text in a shape. Take this heart for example: CSS Shapes Experiments → 🤓 Back in 2006 (!) I created a small site/tool named “The Box Office” to fake that. It took the line-height and floated a truckload of boxes to one side …
A lesson in webdev history by Jason Hoffman: The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak …
Continue reading “Clearfix: A Lesson in Web Development Evolution”
Ryan Yu: There are many great techniques out there to improve the way we write CSS, and from my experience, I found the following three techniques that make up the BIO acronym work very well together BEM ITCSS OOCSS A lot of developers/engineers already know those famous techniques but I would like to go through …
Continue reading “BIO: Combining the powers of BEM, OOCSS and ITCSS for Improving CSS”
With CSS Grid being available, Max Böck set out to find himself a layout challenge: I went over to dribbble in search of layout ideas that are pushing the envelope a bit. The kind of design that would make frontend developers like me frown at first sight. He settled on the “Digital Walls” shot (pictured …