Life after modern layout properties

Or what's the next thing to focus on in the world of CSS after the standarization of modern layout systems

  • Nicolás Joel Engler
  • Currently: Full-stack Designer @ Nuvem Shop
  • Twitter: @nicolasjengler
  • Email: hi@nicolasjengler.com.ar

CSS3? CSS4?
Next generation CSS?
No, just CSS.

We are no longer versioning CSS as a whole

CSS1 and CSS2/2.1 were monolithic specifications that worked it all up in a single document, but after these versions, in order to organize and speed up processes, CSS was modularized starting from what we know as CSS3, which was actually a group of Level 3 modules.

In this presentation we'll be looking at some of the new modules that are currently under development like: CSS Color Module Level 4, CSS Pseudo-Elements Module Level 4, CSS Text Module Level 4, CSS Text Decoration Module Level 3, and Selectors Level 4.

CSS Color
Module Level 4

Color formats & others

  • 6 digits hex value, i.e.: #ffff00 – 3 digits hex value, i.e.: #ff0
  • RGB value, i.e.: rgb(255,255,0) – RGBa value, i.e.: rgb(255,255,0,1)
  • HSL value, i.e.: hsl(60,100%,50%)
    HSLa value, i.e.: hsla(60,100%,50%,1)
  • 8 digits hex value w/alpha channel, i.e.: #ffff00ff
    4 digits hex value w/alpha channel, i.e.: #ff0f
  • HWB value w/optional alpha channel, i.e.: hwb(60,0%,0%)
  • LCH value w/optional alpha channel, i.e.: lch(100,99,95)
  • Lab value w/optional alpha channel, i.e.: lab(97,-21,95)
  • Gray function w/optional alpha channel, i.e.: gray(255,50%)
  • Color function i.e.: color(#000 whiteness(+ 25%))
  • Many more, currently under Working Draft status at https://www.w3.org/TR/css-color-4/

CSS Pseudo-Elements
Module Level 4

::first-line

Like it states on the current draft https://www.w3.org/TR/css-pseudo-4/#first-line-pseudo:

The selector p::first-line does not match any real document element. It does match a pseudo-element that conforming user agents will insert at the beginning of every p element.

p::first-line {
	text-transform: uppercase;
}
					
Lorem ipsum dolor sit amet consectetur
adipisicing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua

::first-letter

Like it states on the current draft https://www.w3.org/TR/css-pseudo-4/#first-letter-pseudo:

The ::first-letter pseudo-element represents the first typographic letter unit on the first formatted line of its originating element

p::first-letter {
	font-size: 2em;
	font-weight: bold;
	float: left;
	margin: 0 10px 10px 0;
}
					
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Highlight pseudo-elements

  • ::selection
  • ::inactive-selection
  • ::spelling-error
  • ::grammar-error

Highlight pseudo-elements

Only the following properties apply to highlights stylings:

  • color
  • background-color
  • cursor
  • caret-color
  • outline
  • text-decoration
  • text-emphasis-color
  • text-shadow

::marker

Like it states on the current draft https://www.w3.org/TR/css-pseudo-4/#marker-pseudo:

The ::marker pseudo-element represents the automatically generated marker box of a list item.

ol li::marker {
	font-weight: bold;
	color: limegreen;
}
					
  1. 1. Something here
  2. 2. Something else in this place
  3. 3. Aaand one more thing

CSS Text
Module Level 4

Warning: as they day of revision of this presentation (December 14, 2016), this document is under Editor's Draft status

CSS Text Module Level 4 - Disclaimer

Since this spec is currently under Editor's Draft status, all of the content inside the CSS Text Module Level 4 document is currently under discussion and may change at any moment. The W3C hasn't endorsed this specification and this isn't anything but work in progress.

text-space-collapse

Like it states on the current draft https://drafts.csswg.org/css-text-4/#white-space-collapsing:

This property declares whether and how white space inside the element is collapsed.

text-space-collapse

This property can have the following values:

  • collapse: All of the white space is collapsed into a single character, or in some cases a zero-width space (no character)
  • preserve: Sequences of white space aren't collapsed at all and segment breaks are preserved as forced line breaks
  • preserve-breaks: All of the white space is collapsed, but segment breaks are preserved as forced line breaks
  • preserve-spaces: White space isn't collaped, and tabs/segment breaks are converted to spaces
  • discard: All of the white space is discarded

text-space-trim

Like it states on the current draft https://drafts.csswg.org/css-text-4/#white-space-trim:

This property allows authors to specify trimming behavior at the beginning and end of a box.

text-space-trim

This property can have the following values:

  • trim-inner: For block containers this value discards all whitespace at the beginning of the element up to, and including, the last segment break before the first non-white-space character in the element. It also discards all white space at the end of the element starting with the first segment break after the last non-white-space character in the element. For other elements this value discards all whitespace at the beginning and end of the element.
  • discard-before: All collapsible whitespace immediately before the start of the element is collapsed
  • discard-after: All collapsible whitespace immediately after the end of the element is collapsed

text-wrap

Like it states on the current draft https://drafts.csswg.org/css-text-4/#text-wrap:

This property specifies the mode for text wrapping.

text-wrap

This property can have the following values:

  • wrap: All lines break whenever they should break or as determined by the line-breaking rules currently in effect
  • nowrap: Lines don't break, and text that doesn't fit within the block that contains it overflows it
  • balance: Same as wrap for inline-level elements. For block-level elements that contain line boxes as direct children, line breaks are chosen to balance the remaining space in each line box. Adobe's own demo of how this property should work can be seen at http://webplatform.adobe.com/balance-text/demo/index.html
  • multi-line: Same as wrap for inline-level and block-level elements

wrap-before / wrap-after

Like it states on the current draft https://drafts.csswg.org/css-text-4/#wrap-before:

These properties specify modifications to break opportunities in line breaking and flex line breaking.

wrap-before / wrap-after

These properties can have the following values:

  • auto: Lines break at their normal break points before and after the box, as determined by the line-breaking rules currently in effect
  • avoid: Line breaks are avoided before/after the box
  • avoid-line: Same as avoid but for line breaks
  • avoid-flex: Same as avoid but for flex line breaks
  • line: Forces a line break before/after the box if it is an inline-level element
  • flex: Forces a line break before/after the box if it is a flex item in a multi-line flex container

wrap-inside

The current specification in the draft can be found at https://drafts.csswg.org/css-text-4/#wrap-inside and the possible values are the following:

  • auto: Lines break at allowed break points within the box, as determined by the line-breaking rules currently in effect
  • avoid: Line breaks are avoided within the box if there are no valid break points in the line. If the text breaks, line-breaking restrictions are honored as for auto

The white-space property

All of the properties mentioned before can be merged into a single shorthand white-space property. The following table explains how it works:

white-space text-space-collapse text-wrap text-space-trim
normal collapse wrap none
pre preserve nowrap none
nowrap collapse nowrap none
pre-wrap preserve wrap none
pre-line preserve-breaks wrap none

hyphenate-character

Like it states on the current draft https://drafts.csswg.org/css-text-4/#hyphenate-character:

This property specifies strings that are shown between parts of hyphenated words. The auto value means that the user agent should find an appropriate value, preferably from the same source as the hyphenation dictionary. If a string is specified, it appears at the end of the line before a hyphenation break.

p {
	hyphenate-character: '💩';
}
					
Here it is, a word that will break tremen💩
dously.

hyphenate-limit-zone

Like it states on the current draft https://drafts.csswg.org/css-text-4/#hyphenate-size-limits:

This property specifies the maximum amount of unfilled space (before justification) that may be left in the line box before hyphenation is triggered to pull part of a word from the next line back up into the current line.

hyphenate-limit-chars

Like it states on the current draft https://drafts.csswg.org/css-text-4/#hyphenate-char-limits:

This property specifies the minimum number of characters in a hyphenated word. If the word does not meet the required minimum number of characters in the word / before the hyphen / after the hyphen, then the word must not be hyphenated.

hyphenate-limit-lines

Like it states on the current draft https://drafts.csswg.org/css-text-4/#hyphenate-line-limits:

This property indicates the maximum number of successive hyphenated lines in an element. The no-limit value means that there is no limit.

hyphenate-limit-last

Like it states on the current draft https://drafts.csswg.org/css-text-4/#hyphenate-line-limits:

This property indicates hyphenation behavior at the end of elements, column, pages, and spreads. A spread is a set of two pages that are visible to the reader at the same time. Values are:
  • none: No restrictions are imposed
  • always: The last full line of the element, or the last line before any column, page, or spread break inside the element should not be hyphenated
  • column: The last line before any column, page, or spread break inside the element should not be hyphenated
  • page: The last line before page or spread break inside the element should not be hyphenated
  • spread: The last line before any spread break inside the element should not be hyphenated

CSS Text Decoration
Module Level 3

Warning: as they day of revision of this presentation (December 14, 2016), this document is under Editor's Draft status

CSS Text Decoration Module Level 3 - Disclaimer

Since this spec is currently under Editor's Draft status, all of the content inside the CSS Text Module Level 4 document is currently under discussion and may change at any moment. The W3C hasn't endorsed this specification and this isn't anything but work in progress.

text-decoration-line

Like it states on the current draft https://drafts.csswg.org/css-text-decor-3/#text-decoration-line-property:

Specifies what line decorations, if any, are added to the element. Values have the following meanings:

.no-decoration {
	text-decoration-line: none;
}
.underline-decoration {
	text-decoration-line: underline;
}
.overline-decoration {
	text-decoration-line: overline;
}
.line-through-decoration {
	text-decoration-line: line-through;
}
.blink-decoration {
	text-decoration-line: blink; /* Deprecated. Use CSS animations */
}
					

text-decoration-line

No decoration for this text Underline decoration for this one Aaand overline decoration for this one Last, but not least, line-through decoration for this one

Note that multiple values can be passed to this property

text-decoration-color

Like it states on the current draft https://drafts.csswg.org/css-text-decor-3/#text-decoration-color-property:

This property specifies the color of text decoration (underlines overlines, and line-throughs) set on the element with text-decoration-line.

p {
	text-decoration-line: underline;
	text-decoration-color: limegreen;
}
					
Limegreen underline for this text

text-decoration-style

Like it states on the current draft https://drafts.csswg.org/css-text-decor-3/#text-decoration-style-property:

This property specifies the style of the line(s) drawn for text decoration specified on the element. Values have the same meaning as for the border-style properties.
  • solid
  • double
  • dotted
  • dashed
  • wavy

The text-decoration property

All of the properties mentioned before can be merged into a single shorthand text-decoration property. The following example can give a very vague idea on how it works:


p {
	text-decoration: underline dotted limegreen;
}
					
Limegreen dotted underline for this text

text-decoration-skip

Like it states on the current draft https://drafts.csswg.org/css-text-decor-3/#text-decoration-skip-property:

This property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. Values have the following meanings:

text-decoration-skip

  • none: Decoration is drawn for all text content and across atomic inline-level boxes
  • objects: Decoration isn't drawn for all inline-block level elements, or images for example
  • spaces: Decoration isn't drawn for spacing and word separators
  • ink: Skip decoration where glyphs are drawn. The UA must skip a small distance to either side of the glyph outline
  • edges: The UA should place the start and end of the line inwards slightly to avoid joining different decorations
  • box-decoration: Skip over the box’s margin, border, and padding areas. Note that this only has an effect on decorations imposed by an ancestor

text-underline-position

Like it states on the current draft https://drafts.csswg.org/css-text-decor-3/#text-underline-position-property

This property sets the position of a specified underline on the element

This property possible values are the following:

  • auto
  • under
  • left
  • right

Note that left and right values are used for non ltr / rtl languages

Selectors Level 4

Warning: as they day of revision of this presentation (December 14, 2016), this document is under Editor's Draft status

Selectors Level 4 - Disclaimer

Since this spec is currently under Editor's Draft status, all of the content inside the CSS Text Module Level 4 document is currently under discussion and may change at any moment. The W3C hasn't endorsed this specification and this isn't anything but work in progress.

For the sake of brevity, given the amount of new information in the Selectors Level 4 document, this talk won't be diving deep into each property as it was common until now. Instead, we'll be looking at some of the most important additions to the Selectors Module, and will quickly mention the rest of them.

:invalid / :valid pseudo-classes





					

input:valid {
	border: 2px solid green;
}

input:invalid {
	border: 2px solid red;
}
					

:required / :optional pseudo-classes





					

input:optional {
	border: 2px solid #2e2e2e;
}

input:required {
	border: 2px solid blue;
}
					

:drop / :drop() pseudo-classes

The :drop pseudo class allows us to select and style drop zones. This selector is a huge step forward to achieving a more native way of handling drag-and-drop functionalities.

The :drop() syntax accepts a keyword, and allows us to style the drop zone depending on the current status of the interaction. active for when an item has been dragged over the drop zone, valid to indicate if the item being dragged corresponds with the type of items the drop zone accepts, and invalid for the opposite.

:has() pseudo-class


Some text

Some other text


/* Same as `div:has(h3)` */
:has(h3) {
	border: 2px solid red;
}
/* Could also use `:has(> h3)` if only targeting direct children */
					
Some text

Some other text

:matches() pseudo-class


Some text
Some other other text

:matches(div, aside) {
	border: 2px solid blue;
}

:matches(footer) {
	border: 2px solid green;
}
					
Some text
Some other text

Case insensitive flag for [attr] selectors

By default CSS attribute selectors are case sensitive, but by adding the i flag, we can turn those to case insensitive


Some text
Some other text

[data-attribute="case" i] {
	border: 2px solid blue;
}
					
Some text
Some other text

Other selectors that are worth mentioning

  • :placeholder-shown
  • :dir()
  • :user-error
  • :nth-column() / :nth-last-column()
  • :blank
  • :focus-within
  • :any-link
  • :in-range / :out-of-range
  • :default
  • :read-only / :read-write

Read more at: https://drafts.csswg.org/selectors-4/

Thank you!