skip navigation

CSS I Didn't Know

So I found an interesting and well compiled CSS cheatsheet and thought I’d go through it to see which properties I was not familiar with. Much of it was old, non standard and deprecated properties. But there were some that were still valid, if rarely used.

Property What it does
box-decoration-break If a box is split over several lines, such as a button, this determines how the borders, shadows etc. will look at the breatk. Can take values slice or clone. Boxes can also be split in column layouts so this affect them there too.
:lang(language) Select an element based on it’s language as defined with the HTML lang attribute.
:only-child If an element has only one child this will select it. MDN
:only-of-type an element that has no siblings of the same type. MDN
:enabled / :disabled. Form elements can be disabled by using the one word HTML attribute disabled. They can be selected using :disabled. MDN
@color-profile Not used at present? See MDN
target, target-name, target-position, target-new Not covered in MDN and not to be confused with the pseudo class :target
direction Specifies the text direction: ltr (the default) or rtl
unicode-bidi Works with direction and takes one value bidi-override
text-overflow When text overflows it’s container, such as when using overflow: hidden, this specifies how the text ends. The default is clip but alternatives are ellipsis or it can be a custom string like 'read more'.
transform-style MDN: sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.
Linebox properties

These are used for SVGs.

  • alignment-adjust
  • alignment-baseline
  • baseline-shift
  • dominant-baseline
  • drop-initial-after-adjust
  • drop-initial-after-align
  • drop-initial-before-adjust
  • drop-initial-before-align
  • drop-initial-size
  • drop-initial-value
  • inline-box-align
  • line-stacking
  • line-stacking-ruby
  • line-stacking-shift
  • line-stacking-strategy
  • text-height

More

Property What it does
accent-color Some form elements, like checkboxes, radio buttons, progress bars and range, have an accent colour and this can be used to set that.
color-scheme Can take normal, dark, light and only. The latter is only supported by Safari at the time of writing.
@namespace @namespace svg url('http://www.w3.org/2000/svg'); will set the svg format to be targeted in CSS. Once set you can use `svg
rotate An alternative to transform: rotate(). This and the next two allow these properties to be used independently on one another, unlike when they’re all under `transform.
scale An alternative to transform: scale()
translate An alternative to transform: translate()
☝