Next-level CSS

Next-level CSS@rachelandrew #ffconf

Box Alignment level 3Lining things up with

This is the vertical-centering module.

.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.

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

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

.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

Box Alignment defines how these properties work in other layout methods.

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/

CSS BOX ALIGNMENT LEVEL 3

▸ justify-content

▸ align-content

▸ justify-self

▸ align-self

▸ justify-items

▸ align-items

CSS Grid LayoutA proper layout system with

.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.

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

“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/

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

CSS Grid Layout

Defining a 3 column grid

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

.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.

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

.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.

minmax()

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

.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

CSS Grid auto-placement

<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.

.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()

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

.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.

.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

http://gridbyexample.com/browsers/

display: contentsVanishing boxes with

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

allow indirect children to become flex or grid items

<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.

.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.

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

.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.

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

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

CSS ShapesGetting curvy with

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/

.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

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

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

CSS Shapes

Floating generated content to create

a shape

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

.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

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

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

Feature QueriesCan I Use this with

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

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

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

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

} }

Feature Queries

Checking for support of Grid Layout

@supports ((display: grid) and (shape-outside: circle())) { .has-grid-shapes { /* CSS for these excellent browsers here */

} }

Feature Queries

Test for more than one thing

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/

.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.

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

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

Websites that enhance themselves as the platform improves.

Initial LetterFancy introductions with

Large, decorative letters have been used to start new sections of 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

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

Initial Letter

Make the initial letter four lines tall,

one line above the content and 3 into

the content.

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

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

Currently Safari 9+ only.

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.

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

@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.

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

Writing modesUpside down and back to front with

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

.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.

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

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

Custom propertiesVariables in CSS with

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/

:root { --primary: blue; --secondary: orange; }

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

Custom Properties

Define variables then use them in

CSS

: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

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

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

calc()Adding things up with

Basic mathematics in CSS

<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.

.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.

.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.

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

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

position: stickyStaying put with

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

<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.

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

position: sticky

Applying position: sticky to the dt

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

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

Scroll snappingSnap to it with

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

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

.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!

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

.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!

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

Getting our hands on all the new shiny

Tell browser vendors you want these features

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

Please comment on emerging specifications

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

Thank youhttps://cssgrid.me/ffconf