At the beginning of the year I thought it may be fun to tweet about a CSS property for 100 days in a row. Before I started I wasn't really sure if there are even so many different CSS properties, but I soon realized there are much more, especially if you count all the long-hand properties as separate properties. Or did you know that there are 61 properties starting with border?
I have to say I learned quite a lot about CSS the last 100 days, many of the properties I have never used before or even never heard before. It is pretty incredible how CSS involved over all the years. I also have to say that it is fantastic to have MDN as a reference available. You can learn so much by looking things up there.
So, without further ado here is the full list of properties I tweeted about.
Day 1: outline:— Michael Scharnagl (@justmarkup)
- Shorthand for outline-style, outline-width, and outline-color
- Doesn't take up space, unlike border
- All sides same style, no eg. outline-bottom
ℹ️ Never set outline: none; unless you provide alternative styles.
January 6, 2020
Day 2: font-size-adjust— Michael Scharnagl (@justmarkup)
- How font size should be chosen based on the height of lowercase.
- Set size of fallback fonts (less FOUC)
ℹ️ Not well supported, so recommend
https://t.co/T8NyGx2ifn for now to set size of fallback fonts
January 7, 2020
Day 3: transform— Michael Scharnagl (@justmarkup)
- Rotate, scale, skew, or translate an element.
- If value is not none creates a stacking context.
- Perfect for performant animation.
ℹ️ When using in animation make use of the prefers-reduced-motion media feature
January 8, 2020
Day 4: display— Michael Scharnagl (@justmarkup)
- Sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
Too many values to fit in a tweet 😁
January 9, 2020
Day 5: clip-path— Michael Scharnagl (@justmarkup)
- Creates a clipping region that sets what part of an element should be shown
- You can use svg (eg. url(a.svg#b);), shape values (eg. circle(50px at 0 100px)) and geometry-box values eg. margin-box)
January 10, 2020
Day 6: box-sizing— Michael Scharnagl (@justmarkup)
- Sets how the total width and height of an element is calculated.
/* Reset, so an element's specified width and height aren't affected by padding or borders */
January 11, 2020
Day 7: position— Michael Scharnagl (@justmarkup)
- Sets how an element is positioned
- Possible values are relative, absolute, fixed, sticky and static
ℹ️ Use absolute, fixed and sticky positioned elements carefully, as they may be problematic for keyboard users.
January 12, 2020
Day 8: all— Michael Scharnagl (@justmarkup)
- Resets all of an element's properties (except unicode-bidi and direction)
- Set properties to their initial or inherited values, or to the values specified in another stylesheet origin
January 13, 2020
Day 9: border-image— Michael Scharnagl (@justmarkup)
- Draws an image around an element. Replaces the element's regular border.
- You can use linear-gradient or an image source.
ℹ️ Always define a border-style as fallback in case the border image fails to load.
January 14, 2020
Day 10: font— Michael Scharnagl (@justmarkup)
- Shorthand for font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family
- Alternatively, sets an element's font to a system font
ℹ️ Nobody* knows the correct order for the font property
January 15, 2020
Day 11: animation-play-state— Michael Scharnagl (@justmarkup)
- Sets whether an animation is running or paused.
ℹ️ When you set it to paused and after again to running it will start the animation from where it left off at the time it was paused
January 16, 2020
Day 13: caption-side— Michael Scharnagl (@justmarkup)
- Puts the content of a table's <caption> on the specified side. The values are relative to the writing-mode of the table
- Currently supported values are either top or bottom
January 18, 2020
Day 14: background-attachment— Michael Scharnagl (@justmarkup)
- Sets whether a background image's position is fixed within the viewport, or scrolls with its containing block
- Possible values are scroll, local, fixed
ℹ️ Was already available in IE4 (scroll, fixed)
January 19, 2020
Day 16: text-combine-upright— Michael Scharnagl (@justmarkup)
- Sets the combination of characters into the space of a single character.
ℹ️ This is used to produce an effect that is known as tate-chū-yoko (縦中横) in Japanese, or as 直書橫向 in Chinese.
January 21, 2020
Day 17: padding-block-end— Michael Scharnagl (@justmarkup)
- Defines logical block end padding of an element, which maps to a physical padding depending on the element's writing mode
ℹ️ To also support old Edge and IE use PostCSS or similiar
January 22, 2020
Day 18: font-kerning— Michael Scharnagl (@justmarkup)
- Sets the use of the kerning information stored in a font.
ℹ️ In well-kerned fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be
January 23, 2020
Day 19: columns— Michael Scharnagl (@justmarkup)
- Sets the column width and column count of an element.
- It is a shorthand property that sets both the column-width and column-count properties in a single, convenient declaration.
January 24, 2020
Day 20: justify-content— Michael Scharnagl (@justmarkup)
- Defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
January 25, 2020
Day 21: right— Michael Scharnagl (@justmarkup)
- Participates in specifying the horizontal position of a positioned element.
ℹ️ When both left and right are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both.
January 26, 2020
Day 22: text-shadow— Michael Scharnagl (@justmarkup)
- Adds shadows to text.
ℹ️ When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.
January 27, 2020
Day 23: list-style-image— Michael Scharnagl (@justmarkup)
- Sets an image to be used as the list item marker.
ℹ️ Be aware, you can't define the size of the used image here with CSS.
January 28, 2020
Day 24: white-space— Michael Scharnagl (@justmarkup)
- Sets how white space inside an element is handled.
ℹ️ To make words break within themselves, use overflow-wrap, word-break, or hyphens instead.
January 29, 2020
Day 25: scroll-behavior— Michael Scharnagl (@justmarkup)
- Sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs
ℹ️ Note that any other scrolls, eg. those performed by the user, are not affected by this property
January 30, 2020
Day 26: max-height— Michael Scharnagl (@justmarkup)
- Sets the maximum height of an element
- Prevents the height property from becoming larger than the value specified for max-height.
ℹ️ Often used to transition height, as to height: auto not possible
January 31, 2020
Day 27: block-size— Michael Scharnagl (@justmarkup)
- Defines the horizontal or vertical size of an element's block, depending on its writing mode.
ℹ️ It corresponds to either the width or the height property, depending on the value of writing-mode.
February 1, 2020
Day 28: text-indent— Michael Scharnagl (@justmarkup)
- Sets the length of empty space (indentation) that is put before lines of text in a block
ℹ️ Often used to visually hide content (text-indent: -10000px;) - Better use an alternative
February 2, 2020
Day 30: scale— Michael Scharnagl (@justmarkup)
- Allows you to specify scale transforms individually and independantly of the transform property
ℹ️ One/two values for scale along X and Y axes, by using three values last will be for the Z axis (same as scale3d())
February 4, 2020
Day 31: animation-direction— Michael Scharnagl (@justmarkup)
- Sets whether an animation should play forwards, backwards, or alternating back and forth.
ℹ️ Possible values are normal, reverse, alternate and alternate-reverse
February 5, 2020
Day 32: mix-blend-mode— Michael Scharnagl (@justmarkup)
- Sets how an element's content should blend with the content of the element's parent and the element's background.
ℹ️ Creative demo:
February 6, 2020
Day 33: text-orientation— Michael Scharnagl (@justmarkup)
- Sets the orientation of the text characters in a line.
- It only affects text in vertical mode (when writing-mode is not horizontal-tb).
February 7, 2020
Day 34: letter-spacing— Michael Scharnagl (@justmarkup)
- Sets the spacing behavior between text characters.
ℹ️ Applying negative letter spacing to headings makes them more compact and closer in appearance to the body type.
February 8, 2020
Day 35: content— Michael Scharnagl (@justmarkup)
- Replaces an element with a generated value
- Applies to ::before and ::after pseudo-elements
ℹ️ Be aware that some screen reader announce the text
February 9, 2020
Day 36: hyphens— Michael Scharnagl (@justmarkup)
- Specifies how words should be hyphenated when text wraps across multiple lines.
ℹ️ Hyphenation does vary from browser to browser and language support varies quite a lot between them.
February 10, 2020
Day 37: object-fit— Michael Scharnagl (@justmarkup)
- Sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container
ℹ️ It's one of the properties I somehow always forget the name and have to look it up.
February 11, 2020
Day 38: caret-color— Michael Scharnagl (@justmarkup)
- Sets the color of the insertion caret, the visible marker where the next character typed will be inserted.
ℹ️ The caret is typically a thin vertical line that flashes to help make it more noticeable.
February 12, 2020
Day 39: scroll-margin— Michael Scharnagl (@justmarkup)
- Is a shorthand property which sets all of the scroll-margin longhands,
ℹ️ The value specified for scroll-margin determines how much of the page that's primarily outside the snapport should remain visible.
February 13, 2020
Day 41: background-blend-mode— Michael Scharnagl (@justmarkup)
- Sets how an element's background images should blend with each other and with the element's background color.
February 15, 2020
Day 42: isloation— Michael Scharnagl (@justmarkup)
-Determines whether an element must create a new stacking context.
ℹ️ This property is especially helpful when used in conjunction with mix-blend-mode.
February 16, 2020
Day 43: text-decoration-thickness— Michael Scharnagl (@justmarkup)
- Sets the thickness, or width, of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
February 17, 2020
Day 44: direction— Michael Scharnagl (@justmarkup)
- Sets the direction of text, table columns, and horizontal overflow.
ℹ️ Note that text direction is usually defined within a document (e.g. dir attribute) rather than through direct use of the direction property.
February 18, 2020
Day 45: translate— Michael Scharnagl (@justmarkup)
- Allows you to specify translation transforms individually and independently of the transform property.
ℹ️ Currently only supported in Firefox, but others will follow soon hopefully.
February 19, 2020
Day 46: background-position— Michael Scharnagl (@justmarkup)
- Sets the initial position for each background image.
- It is relative to the position layer set by background-origin.
Note: You can't position background-color.
February 20, 2020
Day 47: text-justify— Michael Scharnagl (@justmarkup)
- Sets what type of justification should be applied to text when text-align: justify; is set on an element.
ℹ️ Be careful as the uneven spaces created by justify can harm readability and be very distracting.
February 21, 2020
Day 48: flex— Michael Scharnagl (@justmarkup)
- Sets how a flex item will grow or shrink to fit the space available in its flex container.
- It is a shorthand for flex-grow, flex-shrink, and flex-basis.
ℹ️ CSS Flexbox is awesome in case you didn't know :-)
February 22, 2020
Day 49: z-index— Michael Scharnagl (@justmarkup)
- Sets the z-order of a positioned element and its descendants or flex items.
ℹ️ The maximum value is infinite, bounded only by a browser's variable size. For most browsers this days the highest is 2147483647 though.
February 23, 2020
Day 50: cursor— Michael Scharnagl (@justmarkup)
- Sets the type of cursor, if any, to show when the mouse pointer is over an element.
ℹ️ cursor: none; is for mouse users as outline: none; is for keyboard users - don't do either!
February 24, 2020
Day 51: will-change— Michael Scharnagl (@justmarkup)
- Hints to browsers how an element is expected to change.
ℹ️ In some situations it imay have negative performance impact. So, always test carefully and use as a last resort.
February 25, 2020
Day 55: image-orientation— Michael Scharnagl (@justmarkup)
- Specifies a layout-independent correction to the orientation of an image
ℹ️ Will be probably deprecated in the future. The good news is that browsers will honor EXIF info (Safari and Chrome already does)
February 29, 2020
Day 59: counter-increment— Michael Scharnagl (@justmarkup)
- Increases or decreases the value of a CSS counter by a given value.
ℹ️ You can change multiple counter at once, eg. counter-increment: cter1 cter2 -4; will increment cter1 by 1 and decrement cter2 by 4
March 4, 2020
Day 63: place-content— Michael Scharnagl (@justmarkup)
- Is a shorthand for align-content and justify-content.
ℹ️ If the second value is not present, the first value is used for both, provided it is a valid value for both.
March 8, 2020
Day 64: row-gap (grid-row-gap)— Michael Scharnagl (@justmarkup)
- Sets the size of the gap (gutter) between an element's grid rows.
ℹ️ CSS Grid Layout initially defined the grid-row-gap property. This prefixed property is being replaced by row-gap.
March 9, 2020
Day 65: backface-visibility— Michael Scharnagl (@justmarkup)
- Sets whether the back face of an element is visible when turned towards the user.
ℹ️ Though invisible in 2D, it can become visible when a transformation causes the element to be rotated in 3D space.
March 10, 2020
Day 69: padding— Michael Scharnagl (@justmarkup)
- Sets the padding area on all four sides of an element.
ℹ️ If you use box-sizing: border-box; the padding the width/height will include the padding value.
March 14, 2020
Day 72: grid— Michael Scharnagl (@justmarkup)
- Is a shorthand property that sets all of the explicit grid properties, and all the implicit grid properties, in a single declaration.
ℹ️ It rocks!
March 17, 2020
Day 74: object-position— Michael Scharnagl (@justmarkup)
- Specifies the alignment of the selected replaced element's contents within the element's box.
ℹ️ Like background-position, but for <img>, <video>
March 19, 2020
Day 75: order— Michael Scharnagl (@justmarkup)
- Sets the order to lay out an item in a flex or grid container.
ℹ️ Only effects visual order and not logical or tab order, so be aware of accessibility issues.
March 20, 2020
Day 78: place-self— Michael Scharnagl (@justmarkup)
- Is a shorthand property sets both the align-self and justify-self properties.
ℹ️ The first value is the align-self property value, the second the justify-self one.
March 23, 2020
Day 81: overflow— Michael Scharnagl (@justmarkup)
- Sets what to do when an element's content is too big to fit in its block formatting context.
ℹ️ Setting one axis to visible while setting the other to a different value results in visible behaving as auto.
March 26, 2020
Day 82: word-spacing— Michael Scharnagl (@justmarkup)
- Sets the length of space between words and between tags.
ℹ️ A large positive or negative word-spacing value will make the sentences the styling is applied to unreadable and therefore inaccessible.
March 27, 2020
Day 83: padding-inline-start— Michael Scharnagl (@justmarkup)
- Defines the logical inline start padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation.
March 28, 2020
Day 84: color— Michael Scharnagl (@justmarkup)
- Sets the foreground color value of an element's text and text decorations, and sets the currentcolor value.
ℹ️ The value must be a uniform color. It can't be a <gradient>, which is actually a type of <image>
March 29, 2020
Day 93: shape-outside— Michael Scharnagl (@justmarkup)
- Defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.
ℹ️ The shape editor in Firefox Devtools is really cool
April 7, 2020
Day 94: pointer-events— Michael Scharnagl (@justmarkup)
- Sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
April 8, 2020
Day 95: rotate— Michael Scharnagl (@justmarkup)
- Allows you to specify rotation transforms individually and independently of the transform property.
ℹ️ You can also set the name of the axis you want to rotate the affected element around, e.g. rotate: x 90deg;
April 9, 2020
Day 97: touch-action— Michael Scharnagl (@justmarkup)
- Sets how an element's region can be manipulated by a touchscreen user
ℹ️ After a gesture starts, changes to touch-action will not have any impact on the behavior of the current gesture.
April 11, 2020
Day 99: font-optical-sizing— Michael Scharnagl (@justmarkup)
- Sets whether text rendering is optimized for viewing at different sizes.
ℹ️ The optical size variation axis is represented by opsz in font-variation-settings.
April 13, 2020
Day 100: color-adjust— Michael Scharnagl (@justmarkup)
- Sets what, if anything, the user agent may do to optimize the appearance of the element on the output device.
ℹ️ With that the series is done.
April 14, 2020
Here is the full list on twitter
If you looked closely you saw that I somehow missed Day 12 to tweet - I realized this just now when writing this article, even though I was 100% sure before I didn't miss a day. So, there are only 99 properties after all I tweeted.
Oh, here is what would have been Day 12:
Day 12: inset
- Defines physical offsets, regardless of the element's writing mode, directionality, and text orientation
ℹ️ Is still an Editor’s Draft and currently only supported in Firefox
This article was written with Writerie - The Writer for Internet People.