Final edit: I skimmed all videos (the content was fluffy) and got the following links and lessons out of it. Don't consider them to be the best notes, but I feel most of this is pretty self-explanatory. Personally, I was hoping for some more technical content, but at the same time if I want to quickly hack and get the job done, then this knowledge will help.
Tip: if you want to quickly see the Video headings CTRL + F or CMD + F and type in Video so that you can highlight it. I don't know how to make proper headers on HN.
Video 2
The whole theme of video 2 is: what can I get away with?
caniuse.com
statcounter.com (caniuse.com uses it as a data source)
Use GA to see what you can get away with
chromestatus.com
developer.microsoft.com/en-us/microsoft-edge/platform/status
platform-status.mozilla.org
bugzilla.mozilla.org
Edit video 3:
What happens when a feature isn't supported and you use it?
It strikes it through. / It ignores it.
It's okay that websites don't look identical in every browser. In fact, they never ever do.
CSS is not like JS where it breaks / generates an error. It just ignores stuff it doesn't know.
shape-outside circle example: it works when it works. It is a square if it doesn't work. Users won't necessarily know that it is different.
shape-outside polygon example: it works with supported browsers and is a square when it doesn't work.
CSS Error handling: it just ignores stuff
Edit video 4:
Counting on how CSS handles is enough. Other times it is not quite enough. You want to make adjustment for browsers that do not support many things.
CSS Overrides help.
Basic example: the header is the height of the viewport.
header {
display: flex;
height: 100vh;
}
h1 {
margin: auto;
}
What happens in browsers that do not support display flex?
The functionality gets lost.
Client in said example says it wants a bigger height for older browsers.
Solution:
header {
display: flex;
height: 500px;
height: 100vh;
}
h1 {
margin: auto;
}
caniuse viewport units
caniuse flexbox
Browser supports viewport units but not flexbox.
We want the headline in the middle
Solution:
header {
display: flex;
height: 500px;
height: 100vh;
}
h1 {
padding: 2em 0; /* cannot use margin since the next line overwrites margin /
margin: auto;
}
Check 5:30 for all the different output examples
Firefox inspector: play with CSS.
Edit video 5: feature queries
caniuse initial-letter? Not really, only in Safari
p::first-letter {
color: rgba(255, 255, 255, 0,9);
font-weight: bold;
margin-right: 0.5em;
-webkit-initial-letter: 4;
initial-letter: 4;
}
Initial-letter makes a giant initial letter.
Feature queries look like this:
@supports (initial-letter: 4) or
(-webkit-initial-letter: 4) {
p::first-letter {
color: rgba(255, 255, 255, 0,9);
font-weight: bold;
margin-right: 0.5em;
-webkit-initial-letter: 4;
initial-letter: 4;
}
}
This means that browsers that do not support it, won't show it.
Example of grid and how feature queries help when grid isn't applied.
Code is on 7:15. It is too big to write.
8:30 is more in-depth on the syntax of @supports
There is also one bad idea to use @supports and this is: @support not
Edit video 6: feature queries advanced info
Every version of IE does not know what a feature query is. Safari also did not know it for a long time.
What they do is: they block the whole code.
There are 4 combinations:
(1) browsers that support feature queries && do understand the specific feature
(2) browsers that support feature queries && do not understand the specific feature
(3) browsers that do not support feature queries && do understand the specific feature
(4) browsers that do not support feature queries && do not understand the specific feature
We do not want (3).
Example
@supports (display: flex){
/ code */
}
When using feature query know that you ignore Internet Explorer and Safari.
With older properties you might not want to use feature queries (e.g. flexbox), but for new feature queries you may want to.
Edit video 7: what happens when the browser doesn't understand the CSS?
Ask yourself: how well does a particular feature fail?
Maybe you don't want to use the property at all because it fails horribly.
Example:
h1 {
writing-mode: sideways-lr;
}
caniuse writing-mode? yes 94%
Yet in most browsers sideways-lr doesn't work in most browsers!
Why does caniuse lie to us?!
caniuse represents the level 3 specification of writing-mode, but she is using level 4!
go to the MDN network to checkout support
One solution to this problem is to ignore the feature and create the same output like so:
h1{
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: right;
text-orientation: sideways;
}