Chris’ Corner: Portals, Pages, Potential Polyfills, and the Pretty Reasonable

Posted on by

Maggie Appleton calls “Programming Portals”:

Small, scoped areas within a graphical interface that allow users to read and write simple programmes

brb updating all the marketing copy around here.

I like how casually Brad Frost describes essentially all of web design. It all boils down to stuff and layout:

The bulk of a design system’s component library can be thought of as stuff. Buttons! Accordions! Form controls! Stuff! Layout and grid serve as boxes to put all that other stuff, and as such they require some different thought and consideration than other stuff-shaped components.

Even layout itself has gotten relatively easy in CSS as of late, which Brad demonstrates with a bunch of nice reference Pens.

Let’s hang out on the layout thing for a minute. I enjoyed Vadim Makeev’s 6+5 ways to make a two-column layout: from pretty reasonable to com­pletely wrong.

Two columns! That’s it! A side-by-side layout, which web design has needed to do since day one. (I also think of side-by-side layouts as a “Media Object” since Nicole Sullivan’s seminal article on CSS architecture.) How many ways to do this can one language have? Hold my beer, says CSS.

  1. HTML <table>
  2. Floats
  3. Inline Block
  4. Multi Column
  5. Flexbox
  6. Grid

Those, as Vadim says, are “reasonable”. The “+5” part is another whole group of ways to do this that work but are questionable at best.

  1. Absolute positioning
  2. Using writing mode to turn blocks of text “sideways”
  3. SVG foreignObject
  4. element()
  5. frameset / frame

I love it. I feel like we should keep going. Canvas! Unicode blocks in a <pre>! And the ever-hilarious –webkit-box-reflect.

There is a specified variant of the :nth-child selector that uses the of keyword to scope what you are counting. For example:

li:nth-child(2 of .featured) {
  
}

So you’re not just selecting the second list item, you’re selecting the 2nd appearance of the .featured class on list items. It’s a common mistake that that’s what li.featured:nth-child(2) does, but no, that only selects if a list item both has the class featured and happens to be the 2nd child. We want to select…

<*l>
  <li>thing
  <li>thing
  <li class="featured">thing
  <li>thing
  <li class="featured">**THIS ONE**
  <li>thing

Sad trombone: only Safari has implemented this feature.

But Bramus Van Damme has a solution! 

.featured ~ .featured:not(.featured ~ .featured ~ .featured) {
  color: red;
}

That’s a whack-looking selector, but it’s essentially saying “select all .featured elements that come after another .featured element, but stop selecting once you hit three”. You keep getting more and more complicated with this, which is actually good to know is possible, but I think I’ll wait on that action until I need it for something.