• Border Images
  • border-image shorthand
  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat
  • Putting it all together
• Web performance
• Multi column layout
  • column-count
  • column-fill
  • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
  • column-span
  • column-width
  • columns
  • Related Properties
    • break-after
    • break-before
    • break-inside
    • orphans
    • widows
• Art direction
• Cursors
• Other features

Shorthand for border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat. Omitted sub-values are set to initial.

<source> <slice> / <width> / <outset> <repeat>

border-image-source

The source image.

border-image-slice

The dimensions for slicing the source image into regions.{1,4}

border-image-width

The width of the border image.{1,4}

border-image-outset

The distance of the border image from the element's outside edge. Up to four values may be specified. {1,4}

border-image-repeat

Defines how the top and bottom and left and right edge regions of the source image are adjusted to fit the dimensions of the border image.{1,2}

border-image: source || slice / width / outset  || repeat;

border-style: 
border-image-source: none | url() | <image>
border-image-slice: <number> | XX% {1,4} && fill
border-image-width: <length> | XX% | <number> | 1 | auto {1,4}
border-image-outset: <length> | <number> {1,4}
border-image-repeat: stretch | repeat | round | space{1,2}

• Syntax for non-prefixed differs
• Must also declare border-style
• Declaring border overrides it, but not any of the long-hand properties
• Border image tool
border-image browser support

Determines whether an element must create a new stacking context.

auto | isolate

Use case: Prevent elements from blending with their backdrops.

auto

A new stacking context is created only if one of the properties applied to the element requires it.

isolate

A new stacking context must be created. Also prevents an element from blending into other elements that are in the backdrop.

Allows you to say an element and its contents are, as much as possible, independent of the rest of the document tree.

none | strict | content |  size | layout | style | paint

Enables the browser to recalculate layout, style, paint, and size for a limited area of the DOM and not the entire page.

contain: size paint;

none

Element renders as normal, with no containment applied.

strict

All containment rules except style are applied. Same as contain: size layout paint;.

content

All containment rules except size and style are applied to the element. Same as contain: layout paint.

size

Element can be sized without reflowing its descendants. No need to check them for size changes.

layout

Nothing outside the element may affect its internal layout, and nothing inside the element may effect the external layout.

style

For properties that can effect more than just an element and its descendants, those effects don't escape the containing element.

paint

Descendants of the element don't display outside its bounds. If an element is off-screen or otherwise not visible, its descendants are also guaranteed to not be visible.

paint, strict and content creates a new stacking context, a new block formatting context and, new containing blocks for the descendants which position property is absolute or fixed.

Properties that will lead to compositing include:

• 3D transforms (transform: translateZ(), rotate3d(), etc.)
• animating transform and opacity
• position: fixed
• will-change:
• filter:

Hints how an element is expected to change so browser can optimize for change before an element is happens. Can increase the responsiveness of a page by doing expensive work before its required.

auto | scroll-position | contents | <ident>

auto

Tells the browser "You do you", which it was going to do anyway.

scroll-position

Tells the browser "The scroll position will change or be animated soon"

contents

Tells the browser "something about contents will animate or change soon."

<ident>

A property or several properties that will animate or change soon. A shorthand indicates that all the longhands will participate.
Can't be set to: unset, initial, inherit, will-change, auto, scroll-position, or contents.

Chromes establishes a new compositing layer or a new stacking context for each element with this property set to anything but auto.

• Avoid using!
• Don't apply will-change to too many elements.

Browser blocks rendering until all styles are parsed. It does not block on styles it knows it will not use.

• Use media queries so it knows when to block.
• Move not-immediately used styles, such as print styles, into separate files.
• This makes 'needed' CSS file much smaller

<link rel="stylesheet" href="styles.css"> <!-- blocking -->
<link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> 
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens -->

Browser does download not-needed-now stylesheets, but doesn't render block. By separating out the CSS into multiple files, the main render-blocking file is much smaller reducing the time that rendering is blocked.

There are lower hanging fruit!

Optimize a single image. You've saved more bytes, times, and CPU than micromanaging selectors

ID, e.g. #header
Class, e.g. .promo
Type, e.g. div
Adjacent sibling, e.g. h2 + p
Child, e.g. li > ul
Descendant, e.g. ul a
Universal, i.e. *
Attribute, e.g. [type=”text”]
Pseudo-classes/-elements, e.g. a:hover

Read Performance of CSS Selectors is Still Irrelevant

column-count: 1;      
column-width: 10em;   
column-rule: 1px solid #bbb;
column-gap: 2em;      

column-count:
column-width:
columns: <min-column-width> <max-column-cound>

column-fill: auto | balance;
column-gap: normal | length;
column-span: none | all;

column-rule-color:
column-rule-style: <border-style>
column-rule-width:
column-rule:

break-after
break-before
break-inside

orphans
widows

"max-count" for columns. Sets the maximum number of columns in a multi-column layout.

<integer> | auto

The number of columns will not exceed the number listed, but may be fewer, if the width of each column would be less than the minimum width set by the column-width property

"min-width" for columns. Sets the ideal or 'minimum' column width in a multi-column layout.

<length> | auto

If the container is narrower, the single column's width will be 100%. Otherwise, it will have up to the column-count number of columns, as long as each is at least column-width wide.

sets the column width and column count of an element.

<max-column-count> <min-column-width>

Sets how the contents are balanced when broken into multiple columns. Does it make all the columns equally tall? Or fill the first column first.

auto | balance | balance-all

When height limit is set, should it balance or fill column 1 first? If height is auto, will it ever fill up a second column?

auto

Columns are filled sequentially. Content takes up only the room it needs.

balance

Content is equally divided between columns. In paged media, only the last page is balanced.

balance-all

Content is equally divided between columns. In paged media, all pages are balanced.

Sets the size of the gap (gutter) between an element's columns.

normal | <length-percentage>

Normal is 1em.

Column-gap is now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts. (supported in FF)

Makes it possible for an element to span across all columns when its value is set to all.

none | all

none

Deafault. The element does not span multiple columns.

all

The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.

sets the width, style, and color of the line drawn between columns in a multi-column layout.

<rule-width> <rule-style> <rule-color>

Shorthand for column-rule-width, column-rule-style, and column-rule-color

column-rule-width

Same sytnax as a single valued border-width, with values being <length> | thin | medium | thick. Sets the width of the line drawn between columns.

column-rule-style

Same sytnax as a single valued border-style, with values being none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset. Sets the style of the line drawn between columns

column-rule-color

Same sytnax as a single valued border-color, or just color, with values being any valid color.

column-rule-width: 45px;
  column-rule-style: ridge;
  column-rule-color: var(--colorpop);

column-rule: 45px ridge var(--colorpop);

Element boundaries are affected by three properties: the break-after value of the previous element, the break-before value of the next element, and it's own break-inside value.

• break-after
• break-before
• break-inside
• orphans
• widows

break-after property

Sets how page, column, or region breaks should behave after a generated box. If there is no generated box, the property is ignored.

auto | avoid | always | all | avoid-page | page | left 
right | recto | verso | avoid-column | column 
 avoid-region | region

break-before property

auto | avoid | always | all | avoid-page 
page | left | right | recto | verso 
avoid-column | column | avoid-region | region

auto | avoid | avoid-page | avoid-column | avoid-region

Generic break values

auto

Allows, but does not force, any break (page, column, or region) to be inserted right after the principal box.

avoid

Avoids any break (page, column, or region) from being inserted right after the principal box.

always

Forces a page break right after the principal box. The type of this break is that of the immediately-containing fragmentation context. If we are inside a multicol container then it would force a column break, inside paged media (but not inside a multicol container) a page break.

all

Forces a page break right after the principal box. Breaking through all possible fragmentation contexts. So a break inside a multicol container, which was inside a page container would force a column and page break.

Page break values

avoid-page

Avoids any page break right after the principal box.

page

Forces a page break right after the principal box.

left

Forces one or two page breaks right after the principal box, whichever will make the next page into a left page.

right

Forces one or two page breaks right after the principal box, whichever will make the next page into a right page.

recto

Forces one or two page breaks right after the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)

verso

Forces one or two page breaks right after the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)

Column break values

avoid-column

Avoids any column break right after the principal box.

column

Forces a column break right after the principal box.

Region break values

avoid-region

Avoids any region break right after the principal box.

region

Forces a region break right after the principal box.

orphans property

Sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.

<integer>

widows property

Sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.

<integer>

Open the I have a Dream

Make the

• line height
• font face
• justification
• spacing
• Make the blockquotes and headings stand out.

Try to do it without looking at the example a few slides back.

• unordered
  1. ordered
  2. ordered
• unordered

list-style-type

Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.

list-style-position

Sets whether the bullets appear inside the list items, or outside them before the start of each item.

list-style-image

Allows you to use a custom image for the bullet, rather than a simple square or circle.

<ul>
  <li>
    unordered
    <ol>
      <li>ordered</li>
      <li>ordered</li>
    </ol>
  </li>
  <li>unordered</li>
</ul>

Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.

<counter-style> | <string> | none

The <li> has a default value of display: list-item. The list-style-type property can be applied to all display: list-item.

Inherited. Set on <li>, <ol> or <ul>.

For ordered lists (and counters)

• decimal
• cjk-decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• lower-alpha
• lower-latin
• upper-alpha
• upper-latin
• arabic-indic
• armenian
• bengali
• cambodian
• cjk-earthly-branch
• cjk-heavenly-stem
• cjk-ideographic
• devanagari
• ethiopic-numeric
• georgian
• gujarati
• gurmukhi
• hebrew
• hiragana
• hiragana-iroha
• japanese-formal
• japanese-informal
• kannada
• katakana
• katakana-iroha
• khmer
• korean-hangul-formal
• korean-hanja-formal
• korean-hanja-informal
• lao
• lower-armenian
• malayalam
• mongolian
• myanmar
• oriya
• persian
• simp-chinese-formal
• simp-chinese-informal
• tamil
• telugu
• thai
• tibetan
• trad-chinese-formal
• trad-chinese-informal
• upper-armenian

Sets whether the bullets appear inside the list items, or outside them before the start of each item.

inside | outside

inside

The ::marker is the first element among the list item's contents.

outside

The ::marker is outside the principal blockbox.

Allows you to use a custom image for the bullet, rather than a simple square or circle.

<url> | none

li {
    display: list-item;
    text-align: match-parent;
}
ol {
    list-style-type: decimal;
}
ul, ol, menu {
    counter-reset: list-item;
}
ul, menu, dir {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}
::marker {
    text-align: end;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}

Sets how an element's background images should blend with each other and with the element's background color.

normal | multiply | screen | overlay | darken | lighten | color-dodge 
color-burn | hard-light | soft-light | difference | exclusion
hue | saturation | color | luminosity

Blending modes should be defined in the same order as the background-image property. If the blending modes' and background images' list lengths are not equal, it will be repeated and/or truncated until lengths match.

background-blend-mode: screen, multiply;

Sets the type of cursor, if any, to show when the mouse pointer is over an element.

auto | default | none | context-menu | help | pointer 
progress | wait | cell | crosshair | text | vertical-text 
alias | copy | move | no-drop | not-allowed | <dir>-resize 
col-resize | row-resize | all-scroll | zoom-in | zoom-out 
grab | grabbing |  [ <url> [ <x> <<y> ]? , ]* 

Where <dir>-resize can be n-, ne-, nw-, s-, se-, sw-, w-, ew-, ns-, nesw-, or nwse-

If importing an image via url() it takes comma-separated URLS followed by one of the keywords above. Optionally, followed by a pair of space-separated x- and y- coordinates setting the cursor's hotspot relative to the top-left corner of the image.

cursor: url(hat.svg), url(hat.cur) 2 5, grabbing;

That said, don't use custom cursors.

• MDN: CSS Filters
• CSS-Tricks: background-blend-mode
• MDN: shape-outside and clip-path