You can use CSS for that! Co-founder Perch CMS / CSS WG Invited - - PowerPoint PPT Presentation

▶
you can use css for that
SMART_READER_LITE
LIVE PREVIEW

You can use CSS for that! Co-founder Perch CMS / CSS WG Invited - - PowerPoint PPT Presentation

Apr 16, 2023 120 likes •1.24k views

@rachelandrew | GOTO Berlin You can use CSS for that! Co-founder Perch CMS / CSS WG Invited Expert / Google Developer Expert / Author / Speaker / Web Developer. @rachelandrew https://rachelandrew.co.uk Lining things up with Box

slide-1
SLIDE 1

You can use CSS for that!

@rachelandrew | GOTO Berlin

slide-2
SLIDE 2

@rachelandrew
 


https://rachelandrew.co.uk

Co-founder Perch CMS / CSS WG Invited Expert / Google Developer Expert / Author / Speaker / Web Developer.

slide-3
SLIDE 3

Box Alignment level 3

Lining things up with

slide-4
SLIDE 4

This is the vertical- centering module.

slide-5
SLIDE 5

.box { display: flex; align-items: center; justify-content: center; } <div class="box"> <img alt="balloon" src="square- balloon.jpg"> </div>

Flexbox

Centre the content of .box.

slide-6
SLIDE 6

http://codepen.io/rachelandrew/pen/XKaZWm

slide-7
SLIDE 7

http://codepen.io/rachelandrew/pen/RavbmN

slide-8
SLIDE 8

.wrapper { display: flex; } .wrapper li { min-width: 1%; flex: 1 0 25%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: flex-start; } .wrapper li:nth-child(4) { align-self: flex-end; }

Flexbox

Aligning items within the flex container

slide-9
SLIDE 9

Box Alignment defines how these properties work in

  • ther layout methods.
slide-10
SLIDE 10

The box alignment properties in CSS are a set of 6 properties that control alignment of boxes within other boxes.

CSS BOX ALIGNMENT LEVEL 3

https://drafts.csswg.org/css-align/

slide-11
SLIDE 11

CSS BOX ALIGNMENT LEVEL 3

▸ justify-content ▸ align-content ▸ justify-self ▸ align-self ▸ justify-items ▸ align-items

slide-12
SLIDE 12

CSS Grid Layout

A proper layout system with

slide-13
SLIDE 13

.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); } .wrapper li { min-width: 1%; } .wrapper li:nth-child(2) { align-self: center; } .wrapper li:nth-child(3) { align-self: start; } .wrapper li:nth-child(4) { align-self: end; }

CSS Grid Layout

Aligning grid items with the Box Alignment properties.

slide-14
SLIDE 14

http://codepen.io/rachelandrew/pen/jqdNoL

slide-15
SLIDE 15

“Unlike Flexbox, however, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.”

CSS GRID LAYOUT

https://drafts.csswg.org/css-grid/

slide-16
SLIDE 16

.cards { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }

CSS Grid Layout

Defining a 3 column grid

slide-17
SLIDE 17

http://codepen.io/rachelandrew/pen/qqdGOa

slide-18
SLIDE 18

.cards { display:flex; flex-wrap: wrap; } .card { flex: 1 1 250px; margin: 5px; }

Flexbox

Flexbox can wrap flex items onto multiple rows. A new row becomes a new flex container for the purposes of distributing space.

slide-19
SLIDE 19

http://codepen.io/rachelandrew/pen/VjzrgG

slide-20
SLIDE 20

.cards { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); grid-gap: 10px; }

CSS Grid Layout

Create as many columns as will fit into the container with a minimum width of 200px, and a maximum of 1fr.

slide-21
SLIDE 21

minmax()

slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24

http://codepen.io/rachelandrew/pen/QKwvxJ

slide-25
SLIDE 25

.home-hero { display: grid; grid-gap: 1px; grid-auto-rows: minmax(150px, auto); }

minmax()

Rows should be a minimum of 150px and a maximum of auto

slide-26
SLIDE 26

CSS Grid auto-placement

slide-27
SLIDE 27

<ul class="colors"> <li style="background- color:#FFFFFF;color:black" class="white">FFF FFF </li> <li style="background- color:#CCCCCC;color:black">CCC CCC </li> <li style="background- color:#999999;color:black" class="span3">999 999 </li> </ul>

Grid auto-placement

I have a list with all ye olde web safe colours in it.

slide-28
SLIDE 28

.colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto); }

Grid auto-placement

I auto-fill columns and rows with minmax()

slide-29
SLIDE 29

http://codepen.io/rachelandrew/pen/LRWPNp/

slide-30
SLIDE 30

.white { grid-column: 1 / -1; grid-row: 3; } .black { grid-column: 1 / -1; grid-row: 6; } .span2 { grid-column-end: span 2; grid-row-end: span 2; } .span3 { grid-column-end: span 3; grid-row-end: span 3; } .tall4 { grid-row-end: span 4; }

Grid auto-placement

Adding classes to some elements, by setting the value of grid-column-end and grid-row-end to span.

slide-31
SLIDE 31
slide-32
SLIDE 32

.colors { display: grid; grid-template-columns: repeat(auto-fill,minmax(80px, 1fr)); grid-gap: 2px; grid-auto-rows: minmax(80px, auto); grid-auto-flow: dense; }

Grid auto-placement

grid-auto-flow with a value of dense

slide-33
SLIDE 33
slide-34
SLIDE 34

http://gridbyexample.com/browsers/

slide-35
SLIDE 35

display: contents

Vanishing boxes with

slide-36
SLIDE 36

The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo- elements in the document tree.

DISPLAY: CONTENTS

https://drafts.csswg.org/css-display/#box-generation

slide-37
SLIDE 37

allow indirect children to become flex or grid items

slide-38
SLIDE 38

<div class="wrapper"> <h1></h1> <p></p> <blockquote class="inset"></blockquote> <p></p> <ul class="images"> <li></li> <li></li> </ul> <p></p> </div>

display: contents

All elements are direct children of ‘wrapper’ except for the li elements.

slide-39
SLIDE 39

.wrapper { max-width: 700px; margin: 40px auto; display: grid; grid-column-gap: 30px; grid-template-columns:1fr 1fr; } .wrapper h1, .wrapper p { grid-column: 1 / -1; } .inset { grid-column: 1 ; font: 1.4em/1.3 'Lora', serif; padding: 0; margin: 0; } .inset + p { grid-column: 2; }

display: contents

A two column grid. The h1, p and blockquote with a class of inset are all direct children.

slide-40
SLIDE 40

http://codepen.io/rachelandrew/pen/gLborW

slide-41
SLIDE 41

.images { display: contents; }

display: contents

The ul has a class of images. By applying display: contents the ul is removed and the li elements become direct children.

slide-42
SLIDE 42

http://codepen.io/rachelandrew/pen/gLborW

slide-43
SLIDE 43

https://www.chromestatus.com/feature/5663606012116992

slide-44
SLIDE 44

CSS Shapes

Getting curvy with

slide-45
SLIDE 45

CSS Shapes describe geometric shapes for use in CSS. For Level 1, CSS Shapes can be applied to floats. A circle shape on a float will cause inline content to wrap around the circle shape instead of the float’s bounding box.

CSS SHAPES

https://drafts.csswg.org/css-shapes/

slide-46
SLIDE 46

.balloon { float: left; width: 429px; shape-outside: circle(50%); } <div class="box"> <img class="balloon" src="round- balloon.png" alt="balloon"> <p>...</p> </div>

CSS Shapes

A simple shape using the 
 shape-outside property

slide-47
SLIDE 47

http://codepen.io/rachelandrew/pen/KrvyQq

slide-48
SLIDE 48

.box::before { content: ""; display: block; float: left; width: 429px; height: 409px; shape-outside: circle(50%); }

CSS Shapes

Floating generated content to create a shape

slide-49
SLIDE 49

http://codepen.io/rachelandrew/pen/mErqxy

slide-50
SLIDE 50

.balloon { float: right; width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px);

  • webkit-clip-path: ellipse(28% 50% at

460px); clip-path: ellipse(28% 50% at 460px); }

CSS Shapes

Using clip-path to cut away part of an image

slide-51
SLIDE 51

http://codepen.io/rachelandrew/pen/vKJmXR

slide-52
SLIDE 52

http://caniuse.com/#feat=css-shapes

slide-53
SLIDE 53

Feature Queries

Can I Use this with

slide-54
SLIDE 54

The ‘@supports’ rule is a conditional group rule whose condition tests whether the user agent supports CSS property:value pairs.

FEATURE QUERIES

https://www.w3.org/TR/css3-conditional/#at-supports

slide-55
SLIDE 55

http://caniuse.com/#feat=css-featurequeries

slide-56
SLIDE 56

Anything new in CSS you can use feature queries to detect support.

slide-57
SLIDE 57

@supports (display: grid) { .has-grid { /* CSS for grid browsers here */ } }

Feature Queries

Checking for support of Grid Layout

slide-58
SLIDE 58

@supports ((display: grid) and (shape-

  • utside: circle())) {

.has-grid-shapes { /* CSS for these excellent browsers here */ } }

Feature Queries

Test for more than one thing

slide-59
SLIDE 59

Using Feature Queries

▸ Write CSS for browsers without support ▸ Override those properties inside the feature queries ▸ See https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

slide-60
SLIDE 60

.balloon { border: 1px solid #999; padding: 2px; } @supports ((shape-outside: ellipse()) and ((clip-path: ellipse()) or (-webkit-clip- path:ellipse()))) { .balloon { border: none; padding: 0; float: right; width: 640px; min-width: 640px; height: 427px; shape-outside: ellipse(33% 50% at 460px);

  • webkit-clip-path: ellipse(28% 50% at

460px); clip-path: ellipse(28% 50% at 460px); } }

Feature Queries

Write CSS for browsers without support, override that and add new CSS inside the feature query.

slide-61
SLIDE 61

http://codepen.io/rachelandrew/pen/vKJmXR

slide-62
SLIDE 62

http://codepen.io/rachelandrew/pen/vKJmXR

slide-63
SLIDE 63

Websites that enhance themselves as the platform improves.

slide-64
SLIDE 64

Initial Letter

Fancy introductions with

slide-65
SLIDE 65

Large, decorative letters have been used to start new sections

  • f text since before the invention of printing. In fact, their use

predates lowercase letters entirely. This [initial-letter] property specifies styling for dropped, raised, and sunken initial letters.

INITIAL LETTER

https://drafts.csswg.org/css-inline/#initial-letter-styling

slide-66
SLIDE 66

h1+p::first-letter { initial-letter: 4 3; }

Initial Letter

Make the initial letter four lines tall,

  • ne line above the content and 3 into

the content.

slide-67
SLIDE 67

http://codepen.io/rachelandrew/full/WobvQq/

slide-68
SLIDE 68

http://codepen.io/rachelandrew/full/WobvQq/

slide-69
SLIDE 69

Currently Safari 9+ only.

slide-70
SLIDE 70

h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; }

Initial Letter

Adding additional styling to the initial letter.

slide-71
SLIDE 71

http://codepen.io/rachelandrew/pen/LbEpPX

slide-72
SLIDE 72

@supports (initial-letter: 3) or (- webkit-initial-letter: 3) { h1+p::first-letter { font-weight: bold; initial-letter: 7 ; background-color: rgb(114,110,151); padding: 2em .5em; margin: 0 5px 0 0; color: #fff; border-radius: 50% ; float: left; shape-outside: margin-box; } }

Initial Letter

Using feature queries to test for support before adding rules that style the first letter.

slide-73
SLIDE 73

http://codepen.io/rachelandrew/pen/LbEpPX

slide-74
SLIDE 74

Writing modes

Upside down and back to front with

slide-75
SLIDE 75

http://codepen.io/rachelandrew/pen/LbVQNW

slide-76
SLIDE 76

.wrapper { display: grid; grid-template-columns: auto 1fr; grid-gap: 40px; } h1 { writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; grid-column: 1; align-self: start; justify-self: start; }

Writing Modes

Using vertical-rl then flipping the text with a transform.

slide-77
SLIDE 77

http://codepen.io/rachelandrew/pen/LbVQNW

slide-78
SLIDE 78

http://caniuse.com/#feat=css-writing-mode

slide-79
SLIDE 79

Custom properties

Variables in CSS with

slide-80
SLIDE 80

This module introduces a family of custom author-defined properties known collectively as custom properties, which allow an author to assign arbitrary values to a property with an author-chosen name, and the var() function, which allow an author to then use those values in other properties elsewhere in the document.

CSS CUSTOM PROPERTIES (CSS VARIABLES)

https://drafts.csswg.org/css-variables/

slide-81
SLIDE 81

:root {

  • -primary: blue;
  • -secondary: orange;

} h1 { color: var(--primary); }

Custom Properties

Define variables then use them in CSS

slide-82
SLIDE 82

:root {

  • -primary: blue;
  • -secondary: orange;

} @supports (--primary: blue) { h1 { color: var(--primary); } h2 { color: var(--secondary); } }

Custom Properties

Can be tested for using feature queries

slide-83
SLIDE 83

http://codepen.io/rachelandrew/pen/mErpZA

slide-84
SLIDE 84

http://caniuse.com/#feat=css-variables

slide-85
SLIDE 85

calc()

Adding things up with

slide-86
SLIDE 86

Basic mathematics in CSS

slide-87
SLIDE 87

<div class="wrapper"> <div class="box box1"> <p>…</p> <div>height is defined by the flex container.</div> </div> <div class="box box2"> <div>height is 140px</div> </div> <div class="box box3"> <div>height is 14em</div> </div> </div>

calc()

Three boxes, each with a div nested inside.

slide-88
SLIDE 88

.box2 { height: 140px; } .box3 { height: 14em; transition: height 0.5s ease; } .box3:hover { height: 30em; }

calc()

Two of the outer boxes have a height, box1 is the height of the content inside. Box3 will grow on hover.

slide-89
SLIDE 89

.box > div { color: #fff; border-radius: 5px; position: absolute; bottom: 20px; right: 20px; width: 30%; height: calc(50% - 20px); }

calc()

In the CSS for the inner box, we calculate the height as 50% - 20px.

slide-90
SLIDE 90

http://codepen.io/rachelandrew/full/VmYYqM/

slide-91
SLIDE 91

http://caniuse.com/#feat=calc

slide-92
SLIDE 92

position: sticky

Staying put with

slide-93
SLIDE 93

A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box.

POSITION: STICKY

https://drafts.csswg.org/css-position/#sticky-pos

slide-94
SLIDE 94

<dl class="authors"> <dt>A</dt> <dd>John Allsopp</dd> <dd>Rachel Andrew</dd> <dt>B</dt> <dd>. . .</dd> </dl>

position: sticky

A dl with dt elements followed by multiple dd elements.

slide-95
SLIDE 95

.authors dt { position: sticky; top: 0; }

position: sticky

Applying position: sticky to the dt

slide-96
SLIDE 96

http://codepen.io/rachelandrew/pen/NbPamG

slide-97
SLIDE 97

http://caniuse.com/#feat=css-sticky

slide-98
SLIDE 98

Scroll snapping

Snap to it with

slide-99
SLIDE 99

https://drafts.csswg.org/css-scroll-snap-1/

slide-100
SLIDE 100

http://caniuse.com/#feat=css-snappoints

slide-101
SLIDE 101

.gallery { scroll-snap-type: mandatory; scroll-snap-destination: 0 100% ; scroll-snap-points-x: repeat(100%); }

Scroll Snapping

Current Firefox implementation - spec has since changed!

slide-102
SLIDE 102

http://codepen.io/rachelandrew/pen/NbPGYg

slide-103
SLIDE 103

.gallery { scroll-snap-type: mandatory; scroll-snap-destination: 0 100% ; scroll-snap-points-y: repeat(100%); }

Scroll Snapping

Current Firefox implementation - spec has since changed!

slide-104
SLIDE 104

http://codepen.io/rachelandrew/pen/xRbXqr

slide-105
SLIDE 105

Getting our hands on all the new shiny

slide-106
SLIDE 106

Tell browser vendors you want these features

slide-107
SLIDE 107

https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes

slide-108
SLIDE 108

Please comment on emerging specifications

slide-109
SLIDE 109

https://github.com/w3c/csswg-drafts/issues

slide-110
SLIDE 110

Thank you

https://cssgrid.me/gotober