April 2 @ 3:15pm
An Event Apart Seattle 2018
Feature Queries
@supports ( ) { }
You can tell the browser – hey… I have a question – do you support this feature?
@supports (display: grid) {
/* Grid stuff goes here in case it is supported */
}
If you haven’t used @supports much, you may wonder why you have to use the property AND the value? Well it’s because if you just said “hey do you support display??” IE will say YEAH!! But they don’t support display: grid. So you have to be specific.
One of the beautifies of CSS itself is that things browsers don’t understand (like old IE not understanding @supports) it just skips over it.
Custom CSS Properties (variables)
Variables are cool because they’re scoped.
If you’re testing for multiple things, you could also check if the least supported thing is supported, and then it’s pretty safe to assume other related things ARE supported and put that CSS inside the @supports too.
In CSS: The Definitive Guide, Eric has some sideways text that isn’t an image, it’s literally sideways text. BUT he only wanted the sideways text IF he could use grid, SO, he has a feature query inside another (they can be nested).
@supports (display: grid) {
…
@supports (writing-mode: sideways-lr) {
…
}
}
or you can combine them:
@supports (display: grid) {
…
}
@supports (display: grid) and
(writing-mode: sideways-lr) {
…
}
They have the same result, so use what makes more sense in your brain.
Then he added MEDIA QUERIES! So we have FEATURE queries and MEDIA queries and they have to work together! Because he only wanted this cool vertical thing to work when there’s enough horizontal space for it to be appropriate, otherwise it takes up too much of the reading area.
Also, ‘ch’ unit stands for ‘zero width in the current font’ but it’s a reasonable approximation of ‘characters’.
there are 2 ways to do this. If you’er going to combine Feature Queries and Media Queries, you can have the @media stuff on the outside and the @supports on the inside, or the other way.
Media Outside Supports Statement (Moss)
When you have more media queries then feature queries, you probably want to go media outside because it will reduce the number of combinations you need to put together.
Media Inside Supports Objects (Miso)
“If this feature is supported, then I’m gonna tell you what to do in these media scenarios”
Use this when there are more support blocks than media switches.
MOSS OR MISO! Lol.
It’s important to remember that CSS is still CSS. It still operates the same way – so sometimes you don’t need a feature query at all!
Because of how CSS was built, there is an implicit feature query built in!! So if a browser understands the CSS, it will try to execute it, otherwise it will skip it!
There’s this beautiful property called hanging-punctuation… ohhhh sweet mama it’s beautiful. It allows punctuation to hang outside the typical space so that the text all lines up in the instance of an opening double quote in a vertical list with other text.
If you’re not using Feature Queries yet, keep them in mind.
Flexbox
display:flex;
This is great for things in a line… It also makes things like spreading elements along a flexbox equally very easy, and vertically centering things really easy (which is actually kind of hard in CSS)!
Instead of using float for columns, use it to float!!! It’s so amazing!
Another great thing about flex is –
suppose I’ve got a nav bar, and I’ve used flex and set the text to justify to the start… In English that means left, but if you translated the site into Hebrew, what CSS do you need to move the nav bar items to the right?… NONE!!
display:flex;
justify-content:flex-start;
One of the other things that took him a while to digest about flexbox is that if it works horizontally, it works vertically!
Flexbox keeps things springy. Everything is related and sort of pushing against each other. There will be a lot of habits we will have to unlearn to really learn how to use flexbox well and get used to it. Accept that you may be frustrated by it at time because you’ll expect it to do things you expect because of inline-block float layouts you didn’t used to have a choice to use.
Eric envies the people that are starting now… because they’re just going to learn flex without all the bad habits we have from when we had no other options.
We will have the same challenge with Grid. What makes it worth it:
A) Flexbox and Grid are pretty easy to get used to
B) Once you break through, it’s amazing what you can do
As you move forward, think about how you will use these layout techniques and make a decision that will keep things clear and efficient.
Example: use CSS Grid for layout level and Flexbox at the component level. Yes a lot of things could use either grid or flex but making the decision on what levels will use which technique avoid that confusion.
Grid can also be used to prototype certain designs SUPER QUICKLY!
He used font-size: calc ( ) which is super interesting to allow the text to be resized along with the boxes they were in, and also mixed blend mode for text (lighten) which was really neat.
Not taking all the notes on the actual examples because without screenshots of each slide it wouldn’t mean much… sorry folks. Lots of cool stuff.
He used body:hover .event { } to change the order of the content by changing the line names so he could compare 2 versions of the page / block structure by just hovering over the page!
Now Eric feels like what he does is basically magic, especially after so many years of fighting with little pieces and breaking out in a sweat because he might float drop because he got his math wrong by 2px!!
WEB DEVELOPER = WIZARD.
0 Comments
Trackbacks/Pingbacks