Download - Confoo: You can use CSS for that!
![Page 1: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/1.jpg)
You can use CSS for that!@rachelandrew @confooca
![Page 2: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/2.jpg)
Box Alignment level 3Lining things up with
![Page 3: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/3.jpg)
This is the vertical-centering module.
![Page 4: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/4.jpg)
.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.
![Page 7: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/7.jpg)
.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
![Page 8: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/8.jpg)
Box Alignment defines how these properties work in other layout methods.
![Page 9: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/9.jpg)
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/
![Page 10: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/10.jpg)
CSS BOX ALIGNMENT LEVEL 3
▸ justify-content
▸ align-content
▸ justify-self
▸ align-self
▸ justify-items
▸ align-items
![Page 11: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/11.jpg)
CSS Grid LayoutA proper layout system with
![Page 12: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/12.jpg)
.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.
![Page 14: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/14.jpg)
“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/
![Page 15: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/15.jpg)
.cards { display:grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }
CSS Grid Layout
Defining a 3 column grid
![Page 17: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/17.jpg)
.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.
![Page 19: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/19.jpg)
.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.
![Page 20: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/20.jpg)
minmax()
![Page 21: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/21.jpg)
![Page 22: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/22.jpg)
![Page 24: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/24.jpg)
.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
![Page 25: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/25.jpg)
CSS Grid auto-placement
![Page 26: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/26.jpg)
<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.
![Page 27: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/27.jpg)
.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()
![Page 29: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/29.jpg)
.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.
![Page 30: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/30.jpg)
![Page 31: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/31.jpg)
.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
![Page 32: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/32.jpg)
![Page 34: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/34.jpg)
display: contentsVanishing boxes with
![Page 35: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/35.jpg)
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
![Page 36: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/36.jpg)
allow indirect children to become flex or grid items
![Page 37: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/37.jpg)
<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.
![Page 38: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/38.jpg)
.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.
![Page 40: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/40.jpg)
.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.
![Page 42: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/42.jpg)
https://www.chromestatus.com/feature/5663606012116992
![Page 43: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/43.jpg)
CSS ShapesGetting curvy with
![Page 44: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/44.jpg)
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/
![Page 45: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/45.jpg)
.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
![Page 47: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/47.jpg)
.box::before { content: ""; display: block; float: left; width: 429px; height: 409px; shape-outside: circle(50%); }
CSS Shapes
Floating generated content to create
a shape
![Page 49: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/49.jpg)
.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
![Page 52: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/52.jpg)
Feature QueriesCan I Use this with
![Page 53: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/53.jpg)
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
![Page 55: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/55.jpg)
Anything new in CSS you can use feature queries to detect support.
![Page 56: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/56.jpg)
@supports (display: grid) { .has-grid { /* CSS for grid browsers here */
} }
Feature Queries
Checking for support of Grid Layout
![Page 57: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/57.jpg)
@supports ((display: grid) and (shape-outside: circle())) { .has-grid-shapes { /* CSS for these excellent browsers here */
} }
Feature Queries
Test for more than one thing
![Page 58: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/58.jpg)
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/
![Page 59: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/59.jpg)
.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.
![Page 62: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/62.jpg)
Websites that enhance themselves as the platform improves.
![Page 63: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/63.jpg)
Initial LetterFancy introductions with
![Page 64: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/64.jpg)
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
![Page 65: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/65.jpg)
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.
![Page 68: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/68.jpg)
Currently Safari 9+ only.
![Page 69: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/69.jpg)
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.
![Page 71: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/71.jpg)
@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.
![Page 73: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/73.jpg)
Writing modesUpside down and back to front with
![Page 75: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/75.jpg)
.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.
![Page 78: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/78.jpg)
Custom propertiesVariables in CSS with
![Page 79: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/79.jpg)
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/
![Page 80: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/80.jpg)
:root { --primary: blue; --secondary: orange; }
h1 { color: var(--primary); }
Custom Properties
Define variables then use them in
CSS
![Page 81: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/81.jpg)
: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
![Page 84: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/84.jpg)
calc()Adding things up with
![Page 85: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/85.jpg)
Basic mathematics in CSS
![Page 86: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/86.jpg)
<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.
![Page 87: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/87.jpg)
.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.
![Page 88: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/88.jpg)
.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.
![Page 91: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/91.jpg)
position: stickyStaying put with
![Page 92: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/92.jpg)
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
![Page 93: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/93.jpg)
<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.
![Page 94: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/94.jpg)
.authors dt { position: sticky; top: 0; }
position: sticky
Applying position: sticky to the dt
![Page 97: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/97.jpg)
Scroll snappingSnap to it with
![Page 100: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/100.jpg)
.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!
![Page 102: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/102.jpg)
.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!
![Page 104: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/104.jpg)
Getting our hands on all the new shiny
![Page 105: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/105.jpg)
Tell browser vendors you want these features
![Page 106: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/106.jpg)
https://developer.microsoft.com/en-us/microsoft-edge/platform/status/shapes/?q=shapes
![Page 107: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/107.jpg)
Please comment on emerging specifications
![Page 109: Confoo: You can use CSS for that!](https://reader034.vdocuments.site/reader034/viewer/2022042723/58728c051a28ab36118b5345/html5/thumbnails/109.jpg)
Thank you
https://rachelandrew.co.uk/speaking/event/confoo-vancouver-2016