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.
#ffff00
– 3 digits hex value, i.e.: #ff0
rgb(255,255,0)
– RGBa value, i.e.: rgb(255,255,0,1)
hsl(60,100%,50%)
hsla(60,100%,50%,1)
#ffff00ff
#ff0f
hwb(60,0%,0%)
lch(100,99,95)
lab(97,-21,95)
gray(255,50%)
color(#000 whiteness(+ 25%))
::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;
}
::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;
}
::selection
::inactive-selection
::spelling-error
::grammar-error
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;
}
Warning: as they day of revision of this presentation (December 14, 2016), this document is under Editor's Draft status
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
white-space
propertyAll 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: '💩';
}
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
Warning: as they day of revision of this presentation (December 14, 2016), this document is under Editor's Draft status
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
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;
}
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
text-decoration
propertyAll 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;
}
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
Warning: as they day of revision of this presentation (December 14, 2016), this document is under Editor's Draft status
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-classesThe :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 */
:matches()
pseudo-class
Some text
:matches(div, aside) {
border: 2px solid blue;
}
:matches(footer) {
border: 2px solid green;
}
[attr]
selectorsBy 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;
}
: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/