Skip to content

Latest commit

 

History

History
1003 lines (728 loc) · 16.1 KB

css-nuggets.mdx

File metadata and controls

1003 lines (728 loc) · 16.1 KB
Raw

import { Appear, Head, Image, Notes } from "mdx-deck"; import { syntaxHighlighterPrism } from "@mdx-deck/themes"; import theme from "./theme";

import { Invert, SplitRight } from "mdx-deck/layouts"; import WithBgImage from "./components/WithBgImage"; import Flex from "./components/Flex"; export const themes = [syntaxHighlighterPrism, theme];

<title>Webbidevaus.fi CSSNuggets™ 8 kpl</title>

Webbidevaus.fi

CSSNuggets™ 8 kpl

- Esittelyt ja millä asialla

Moro!

@rikurouvila

@anttti

  • It's too easy to laugh at CSS.
  • Let's all laugh at CSS so we get that out of our systems.

<img style={{ width: "60%" }} src="images/css.png" />

  • A: CSS is like that one cousin who's always drunk at parties and says the stupidest politically incorrect things
  • You don't like them but have to live with them
  • A: Most of the confusion about that drunk cousin is just about not understanding what they actually mean
  • R: We have 8 tasty nuggets for you
  • R: Practical tips for everyday use on all skill levels

Nugget 1

font-display

@font-face {
  font-family: "my-font";
  src: url(my-font.woff2) format("woff2");
}
This is more or less how you traditionally load a web font: Specify name and source.

FOUT & FOIT

Flash of Unstyled Text
Flash of Invisible Text

font-display

  • block
  • swap
  • fallback
  • optional
  • Block: Invisible for 3 secs, then fallback
  • Swap: Fallback immediately, custom font swapped
  • Fallback: Invisible for 100ms, then fallback
  • Optional: Like fallback, but browser can choose not to show web font at all

<img style={{ width: "80%" }} src="images/fontdisplay.png" />

https://font-display.glitch.me/

  • Block: Invisible for 3 secs, then fallback
  • Swap: Fallback immediately, custom font swapped
  • Fallback: Invisible for 100ms, then fallback
  • Optional: Like fallback, but browser can choose not to show web font at all

This is great. I use Google Fonts. What can I do?

@font-face {
  font-family: "Roboto";
  src: url(https://fonts...) format("woff2");
}

Google Fonts provides this, but you want...

@font-face {
  font-family: "Roboto";
  font-display: swap;
  src: url(https://fonts...) format("woff2");
}

...this. What to do?

Google Fonts <3 font-display

Google Fonts just rolled out support for font-display!

<img style={{ width: "70%" }} src="images/googleswap.png" />

https://twitter.com/addyosmani/status/
1128548064287952896

Just add a query parameter with the wanted font-display value.

@font-face {
  font-family: "Roboto";
  font-display: swap;
  src: url(https://fonts...) format("woff2");
}

Nugget 2

<img style={{ width: 200 }} src="images/nuggets2.png" />

Use <span style={{ "background":"url(images/nuggets2.png)", "color":"transparent", "backgroundSize": "200%", "backgroundPosition": "40%", "WebkitBackgroundClip":"text" }}>anything as your text background

background-clip: text;
next level

or rather you can clip an element background to match text shape

nuggest are the background

<span style={{ margin: "0", backgroundRepeat: "no-repeat", fontSize: "300px", fontWeight: "bold", background: "url(https://media.giphy.com/media/12p8b9acuBMdYQ/giphy.gif)", color: "transparent", WebkitBackgroundClip: "text" }}

LOL

use it with animations
what ever you can use as background

<span style={{ margin: "0", backgroundRepeat: "no-repeat", fontSize: "150px", fontWeight: "bold", background: repeating-linear-gradient( 45deg, #92d89f, #92d89f 10px, #adffbc 10px, #adffbc 20px ), color: "transparent", WebkitBackgroundClip: "text" }}

backgrounds with
gradient

use it with gradient

<iframe style={{ width: "100vw", height: "100vh" }} scrolling="no" title="zQdrzP" src="//codepen.io/rikukissa/embed/zQdrzP/?height=265&theme-id=0&default-tab=css,result" frameBorder="no" allowtransparency="true" allowfullscreen="true" > See the Pen zQdrzP by Riku Rouvila (@rikukissa) on{" "} CodePen. </iframe>

here's how it works ->

<span style={{ fontSize: "300px", fontWeight: "bold", color: "#fff" }}

HELLO 

h1 {
}

<span style={{ margin: "0", backgroundRepeat: "no-repeat", fontSize: "300px", fontWeight: "bold", background: "url(https://media.giphy.com/media/l2Sqf1Y2g9C3F97kA/giphy.gif)", color: "#fff" }}

HELLO 

h1 {
  background: url(party.gif);
}
Apply a background colour / image / gradient to element containing text

<span style={{ margin: "0", backgroundRepeat: "no-repeat", fontSize: "300px", fontWeight: "bold", background: "url(https://media.giphy.com/media/l2Sqf1Y2g9C3F97kA/giphy.gif)", color: "transparent", WebkitBackgroundClip: "text" }}

HELLO 

h1 {
  background: url(party.gif);
  background-clip: text;
  color: transparent;
}

Useful? ->


I think we can all agree

always someone with doubts

ask you to pay close attentions

Also works with emojis 🤩

🔥💘🎉🍆🎙🤷‍

Also works with emojis 🤩

🔥💘🎉🍆🎙🤷‍

Nugget 3

Grid

Remember these f*ckers?

display: box;
display: -webkit-box;
display: flexbox;
display: -ms-flexbox;
display: flex;
...
  • Got burnt by flexbox and it's browser support
  • Support used to be spotty and random
  • Development in browsers happened in public using vendor-prefixed CSS properties
  • Different spec implementations

Only one* implementation

  • Only one implementation
  • Works the same in every browser
  • Was shipped the same time for all the major browsers

*

Of course there's an asterisk.

  • With the exception of the internet's favorite joke
  • No CSS presentation is complete without laughing at IE
  • Grid started in IE 10!
  • Support the 2012 ms-grid

  • IE 10: 0,06% world, 0,02% FI
  • IE 11: 2,3% world, 1,82% FI
  • Given the market share of the supported, I'd say...

...YES, and for IE you can progressively rock grid support

Yes!

And for IE you can

progressively rock

grid support

www.rachelandrew.co.uk/archives/2016/11/26/
should-i-try-to-use-the-ie-
implementation-of-css-grid-layout/ IE does not support:
  • Auto-placement
  • Gutters
  • Grid-template-areas
autoprefixer({
  grid: true
});
Autoprefixer does grid, but it's opt-in because the same named properties behave differently.

Strategy for grid

  • Mobile first
  • @supports feature query
  • Just doing the grid in IE style
@supports: First write CSS that works everywhere, then add @supports

Nugget 5

property with flexbox

cool new (incoming) property

flexbox gets a bad rap

grid has progressed flex development

Inline elements

wrap when the container shrinks 
.item {
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}

☝️
Issue

.item {
  margin-bottom: 0.5em;
  margin-right: 0.5em;
}
.container {
  display: flex;
  gap: 0.5em;
}
  • Only works on Firefox atm
  • Example is also hacked together
gap: 20px;
gap: 1em;
gap: 3vmin;

/* ... So */
gap: < "row-gap" > < "column-gap" >;

Nugget 6

Components should only care about their inner beauty

Component define styles inside their own borders

No margins around it =

Good button 👍

Pushing itself with margin-left =

Bad button 👎


margin-left: 0 ?

Nugget 6

Margins. How do they work?

<iframe style={{ width: "100vw", height: "100vh" }} scrolling="no" title="Margin collapse" src="//codepen.io/anttti/embed/yWXZZZ/?height=265&theme-id=dark&default-tab=css,result" frameBorder="no" > See the Pen{" "} Margin collapse by Antti Mattila (@anttti) on{" "} CodePen. </iframe> Margins collapse when two vertical margins come in contact with one another. If one margin is greater than the other, the bigger overrides the smaller (as usually happens in life).

Here are adjacent elements, but margin collapsing also happens with parent & first / last child:

<iframe style={{ width: "100vw", height: "100vh" }} scrolling="no" title="Margin collapse" src="//codepen.io/anttti/embed/dERaQX/?height=265&theme-id=dark&default-tab=css,result" frameBorder="no" > See the Pen{" "} Margin collapse by Antti Mattila (@anttti) on{" "} CodePen. </iframe> Here's another example demonstrating how margin collapsing happens only on the vertical axis.

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

  • Margins collapse when two vertical margins contact
  • If one margin is greater than the other, the bigger overrides the smaller (as usually happens in life)

Weird, huh?!

  • Margins of floating and absolutely positioned elements never collapse.
  • If one margin is negative, the negative margin is subtracted from the positive margin.

  • The general meaning of "margin" isn't to convey "move this over by 10px" but rather, "there must be 10px of empty space beside this element."
  • I guess it sounded like a good idea at the time...?

Nugget 7

Vertical paddings with percentages

80px?

Trick question
Relative to containers width

120px?

<iframe style={{ width: "40vw", height: "100vh" }} scrolling="no" title="wbqGvo" src="//codepen.io/rikukissa/embed/wbqGvo/?height=456&theme-id=0&default-tab=result" frameBorder="no" allowtransparency="true" allowfullscreen="true"> See the Pen wbqGvo by Riku Rouvila (@rikukissa) on CodePen. </iframe> 
.container {
  /* width 200px - 500px */
}

.box {
  padding-top: 50%;
}

Use case

div with a background-image and a fixed aspect-ratio

<iframe style={{ width: "40vw", height: "100vh" }} scrolling="no" title="OYzBLd" src="//codepen.io/rikukissa/embed/OYzBLd/?height=265&theme-id=0&default-tab=result" frameBorder="no" allowtransparency="true" allowfullscreen="true" > See the Pen OYzBLd by Riku Rouvila (@rikukissa) on{" "} CodePen. </iframe> 
.box {
  padding-top: 50%;
  background-image: url("michael.gif");
  background-size: 100% 100%;
}

Nugget 8

CSS TRouBLe?!

.goose {
  margin-top: 0;
  margin-right: 2rem;
  margin-bottom: 1rem;
  margin-left: 1.5rem;
}
You all know what this means, and probably that there's a shorthand way of writing this: 
.goose {
  margin: 0 2rem 1rem 1.5rem;
}
But now it might be a bit tricky to remember the order. Luckily there's a clever rule: 
T op
R ight
o
u
B ottom
L eft
e

.jester {
  border-radius: 4px 8px 2px 6px;
}
Works with border-radius too, but have to think corners instead of sides, starting from top left.

Nugget 9

  • Dankest nugget of them all
  • Most dope
  • Most moist
  • Most Gucci
  • Most lit
  • Most wörtti

🎧
Listen to webbidevaus.fi