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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 6: box-sizing
- 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 */
*,
*::before,
*::after {
box-sizing: border-box;
}
— Michael Scharnagl (@justmarkup)Day 7: position
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 10: font
- 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
— Michael Scharnagl (@justmarkup)Day 11: animation-play-state
- 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
— Michael Scharnagl (@justmarkup)Day 13: caption-side
- 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
— Michael Scharnagl (@justmarkup)Day 14: background-attachment
- 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)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 16: text-combine-upright
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 21: right
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 25: scroll-behavior
- 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
— Michael Scharnagl (@justmarkup)Day 26: max-height
- 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
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 30: scale
- 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())
— Michael Scharnagl (@justmarkup)Day 31: animation-direction
- Sets whether an animation should play forwards, backwards, or alternating back and forth.
ℹ️ Possible values are normal, reverse, alternate and alternate-reverse
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 34: letter-spacing
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 36: hyphens
- 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.
— Michael Scharnagl (@justmarkup)Day 37: object-fit
- 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.
— Michael Scharnagl (@justmarkup)Day 38: caret-color
- 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.
— Michael Scharnagl (@justmarkup)Day 39: scroll-margin
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 43: text-decoration-thickness
- 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.
— Michael Scharnagl (@justmarkup)Day 44: direction
- 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.
— Michael Scharnagl (@justmarkup)Day 45: translate
- Allows you to specify translation transforms individually and independently of the transform property.
ℹ️ Currently only supported in Firefox, but others will follow soon hopefully.
— Michael Scharnagl (@justmarkup)Day 46: background-position
- 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.
— Michael Scharnagl (@justmarkup)Day 47: text-justify
- 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.
— Michael Scharnagl (@justmarkup)Day 48: flex
- 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 :-)
— Michael Scharnagl (@justmarkup)Day 49: z-index
- 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.
— Michael Scharnagl (@justmarkup)Day 50: cursor
- 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!
— Michael Scharnagl (@justmarkup)Day 51: will-change
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 55: image-orientation
- 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)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 59: counter-increment
- 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
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 63: place-content
- 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.
— Michael Scharnagl (@justmarkup)Day 64: row-gap (grid-row-gap)
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 69: padding
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 74: object-position
- Specifies the alignment of the selected replaced element's contents within the element's box.
ℹ️ Like background-position, but for <img>, <video>
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 78: place-self
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 81: overflow
- 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.
— Michael Scharnagl (@justmarkup)Day 82: word-spacing
- 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.
— Michael Scharnagl (@justmarkup)Day 83: padding-inline-start
- 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.
— Michael Scharnagl (@justmarkup)Day 84: color
- 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>
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 94: pointer-events
- Sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
input[disabled],
button[disabled] {
pointer-events: none;
}
— Michael Scharnagl (@justmarkup)Day 95: rotate
- 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;
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 97: touch-action
- 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.
— Michael Scharnagl (@justmarkup)
— Michael Scharnagl (@justmarkup)Day 99: font-optical-sizing
- Sets whether text rendering is optimized for viewing at different sizes.
ℹ️ The optical size variation axis is represented by opsz in font-variation-settings.
— Michael Scharnagl (@justmarkup)
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
https://developer.mozilla.org/en-US/docs/Web/CSS/inset
#CSSPropertyInTweet
I might repeat this some day, maybe 50 JavaScript keywords or something.
<information>
This article was written with Writerie - The Writer for Internet People.
</information>
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.