Eric Meyer is not only one of the founders of An Event Apart, he’s a fantastic speaker. For the past few years, his talks have centered around compassionate design. This year, his talk centered on CSS and its new capabilities, features, and options.
Now it’s time for @meyerweb with Fit for Purpose: Making Sense of the New CSS.
Eric’s been experimenting with new stuff for the past year or so, looking for new ways to put things together #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
A bridge from the past to the future: feature queries@supports () {} is a pattern that helps progressive enhancements. It’s like a media query but instead protects the browser from CSS it can’t use@supports (display: grid) {
/*grid stuff goes here. */
}#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
These can be very simple. They’re always a property value combination. @supports (color: red) is valid@supports (color: var( — v) ) <— custom properties, aka variables. Going to put them in this block. @suports (- – css: variables) lets you then define variables#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Some may remember browser sniffing. (My career started by being the only one fluent in user agent strings in my department.) Old browsers would allow you to lie to servers about what useragent strings they were. Feature querying is sooooooo much better #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
You can’t just put any old thing on the value side of the equation. @supports (clip-path: polygon()) *won’t* work@supports (clip-path: polygon (0 0)) *will* work
You have to give the browser a value it recognizes.
Easy to trip up on!#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
You can put supports in supports. @supports (display: grid) {
…
@supports (writing-mode: sideways-lr) {
…
}
}@supports (display:grid) and (writing-mode: sideways-lr)
☝?does the same thing#AEADC— Anne Gibson (@perpendicularme) July 30, 2018
(*pictures fistfights over nesting vs “and” in future developer meetings – much like spaces vs tab) #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
There’s also an “or”@supports (writing-mode: sideways-lr) or (writing-mode: vertical rl) {} allows you to cascade into the one that works best. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Is it media queries then supports, or supports then media queries?
Neither is better than the other, but they will have different strengths. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Media Outside Support Statements (MOSS) – might have the exact same supports patterns inside each media query.
Media Inside Supports Object (MISO) – provide one supports statement but put each media query in each block.
Goal is minimize # of times you do a thing #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
If you’re focused on breakpoints, prioritize the MOSS pattern. But if you have a lot of @supports queries but not a lot of breakpoints, MISO is the priority.
For a given project, you’ll probably want to pick an approach and stick with it – don’t break brains. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
You don’t always need feature queries even for “cutting edge”.
hanging-punctuation property: only Safari supports it. (Makes letter forms line up even if something’s got quotes around it.)
Don’t have to ask if it’s supported because the other browsers ignore it#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
You don’t have to wrap the @supports to the grid template because browsers without it don’t understand the grid template anyway. You *do* have to wrap @supports to the changes you’re making — like margins — that change because you’re in a grid. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Support for flexbox is so widespread it’s not really necessary. “I really love using flexbox for things that appear to be really pointless.”
AEA hasn’t standardized on picture sizes for speakers. Want design to adapt to the content. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
AEA floats the image block, and then uses flexbox to display the image and icons. Just using text-align kind of fails if the boxes don’t include a picture kind of fails. So they use flex-direction:column on the ones that have no pics and it looks better. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Flexbox makes vertical-centering so simple that we’ve forgotten CSS vertical-centering was hard for 20 years. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Example page we’re talking about: https://t.co/0D8JR3KOgI – you can see the flex usage in the view of the source.
Flex makes internationalization much easier too. Reordering tabs to match language direction is one of its primary use cases. Nothing has to change.#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
The masthead of the @aneventapart website is a logo, skip link, then navigation is down at the bottom of the page, then skip link. This can be handy for accessibility, but can also overlap things.
Now we use aria roles with nav at top, so no absolute position is needed #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Margin-right: auto uses all the leftover space in a flex so it’ll get “magic space” between the items on the left and the items on the back.
Anything you can do horizontally you can do the exact same thing vertically. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Right now @meyerweb is showing a great margin-top trick on flex but it’s too hard for me to tweet. Come see him at the show. #AEADC
Note that the more auto margins you put in something the more things get weird. Limit to one, possibly two!
— Anne Gibson (@perpendicularme) July 30, 2018
Beyond flexbox there’s grid.
Feature queries can be done in multiple ways and you should pick one for your team. When it comes to grid and flexbox, that’s also true #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
“We agreed to use CSS grid at the layout level and Flexbox at the component level (arranging child items of components). Although there’s some overlap and in some cases both could be used interchangeably, abiding by this rule helped us avoid confusion in gray areas.” #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Previous link was from: https://t.co/xZB5JoSm0P
Which has a lot of good tips about doing CSS grid for a team. #AEADC— Anne Gibson (@perpendicularme) July 30, 2018
“I’m going to show you how, then I’m going to tell you why not to do it.”
Display-contents will throw something out of the rendering tree and promote all the decendants. It works for the example Eric is showing visually, but it takes it all out of the accessibility tree #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Display: contents, once fixed from this bug, may be very useful in the future. But for now it breaks accessibility so don’t do it #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Subgrids will also solve problems where we need to add a grid above a thing where we’d naturally add the grid… but the semantics will change a dozen times before it’s set, so @meyerweb is not putting it in the slide deck #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Grid allows for rapid prototyping because it’s easier to write. Export a bunch of images that fit in the grid, throw them in the grid, gives you some idea where things are going to go. @meyerweb uses vw <— 1vw = 1% of the vertical width. #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Using calc with sizes for text made it easier to resize things than other processes.
What’s truly valuable about this is that this prototype was crucial in deciding that it wasn’t the right approach. In a morning, working solo @meyerweb could give an example#AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Just because you use grid for your prototyping doesn’t mean you have to — or will — use grid for your final production code. But to get a prototype out to see if that’s what you want, it’s fast and easy to control #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018
Fun fact: you can use body: hover and some changes to the grid to flip between two layouts using the mouse to decide which one you like #AEADC
— Anne Gibson (@perpendicularme) July 30, 2018