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:



- 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.



https://t.co/utFCUb6hQz



#CSSPropertyInTweet



pic.twitter.com/YmlkCsB0IB — Michael Scharnagl (@justmarkup)



January 6, 2020

Day 2: font-size-adjust



- 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



https://t.co/sFpo4rFck6



#CSSPropertyInTweet



pic.twitter.com/WDJgT78sFp — Michael Scharnagl (@justmarkup)



January 7, 2020

Day 3: transform



- 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



https://t.co/zGLWTRfb8Q



#CSSPropertyInTweet



pic.twitter.com/up4M6TWO9w — Michael Scharnagl (@justmarkup)



January 8, 2020

Day 4: display



- 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 😁



https://t.co/N38gILb57V



#CSSPropertyInTweet



pic.twitter.com/l2hr19mns0 — Michael Scharnagl (@justmarkup)



January 9, 2020

Day 5: clip-path



- 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)



https://t.co/V4CrKbieg9



#CSSPropertyInTweet



pic.twitter.com/tT2CV5kH82 — Michael Scharnagl (@justmarkup)



January 10, 2020

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;

}



https://t.co/LYRZIk1lBI



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 11, 2020

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.



https://t.co/UBFoy6p4ke



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 12, 2020

Day 8: all



- 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



https://t.co/59MGEEG3nP



#CSSPropertyInTweet



pic.twitter.com/croTcFXSQD — Michael Scharnagl (@justmarkup)



January 13, 2020

Day 9: border-image



- 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.



https://t.co/NUOCA9u9gH



#CSSPropertyInTweet



pic.twitter.com/fPpGfDfgAK — Michael Scharnagl (@justmarkup)



January 14, 2020

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



https://t.co/XELaH2zRRR



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 15, 2020

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



https://t.co/wyvCnNBVsk



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 16, 2020

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



https://t.co/oCJ5CvSwUm



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 18, 2020

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)



https://t.co/537iNB8zkd



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 19, 2020

Day 15: animation-delay



- Sets when an animation starts.



ℹ️ If you provide a negative value the animation begins immediately, but partway through its cycle



https://t.co/T7oLmBqmSG



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 20, 2020

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.



https://t.co/WphlZmZaDB



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 21, 2020

Day 17: padding-block-end



- 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



https://t.co/xlQ1JhsaKD



https://t.co/xwBMV5SuTP



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 22, 2020

Day 18: font-kerning



- 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



https://t.co/gMdW6u4dhN



#CSSPropertyInTweet



pic.twitter.com/KRds5rPPJM — Michael Scharnagl (@justmarkup)



January 23, 2020

Day 19: columns



- 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.



https://t.co/IL4I2i7knx



#CSSPropertyInTweet



pic.twitter.com/ygo9ouh5xy — Michael Scharnagl (@justmarkup)



January 24, 2020

Day 20: justify-content



- 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.



https://t.co/tbOuTMokao



#CSSPropertyInTweet



pic.twitter.com/DRfkPgUe3d — Michael Scharnagl (@justmarkup)



January 25, 2020

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.



https://t.co/SS7M3cJHmr



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 26, 2020

Day 22: text-shadow



- Adds shadows to text.



ℹ️ When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.



https://t.co/IrNuESkzOZ



#CSSPropertyInTweet



pic.twitter.com/BQ1N6nnie3 — Michael Scharnagl (@justmarkup)



January 27, 2020

Day 23: list-style-image



- 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.



https://t.co/Ttl5OgRJnp



#CSSPropertyInTweet



pic.twitter.com/1Vn4j3ZHLU — Michael Scharnagl (@justmarkup)



January 28, 2020

Day 24: white-space



- Sets how white space inside an element is handled.



ℹ️ To make words break within themselves, use overflow-wrap, word-break, or hyphens instead.



https://t.co/88uhqyOnRE



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 29, 2020

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



https://t.co/GnIbDgvOci



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 30, 2020

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



https://t.co/kTtWBBjUij



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



January 31, 2020

Day 27: block-size



- 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.



https://t.co/NjupUrEcq1



#CSSPropertyInTweet



pic.twitter.com/k6HHYeUNf7 — Michael Scharnagl (@justmarkup)



February 1, 2020

Day 28: text-indent



- 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



https://t.co/fAh536rVkv



https://t.co/ujqoSG4Rzl



#CSSPropertyInTweet



pic.twitter.com/fCPVc8n49q — Michael Scharnagl (@justmarkup)



February 2, 2020

Day 29: justify-items



- Defines the default justify-self for all items of the box



ℹ️ In flexbox layouts, this property is ignored



https://t.co/ayVvQ3E7Lz



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 3, 2020

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())



https://t.co/ZCn4Wcks6E



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 4, 2020

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



https://t.co/CrJTSFegGx



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 5, 2020

Day 32: mix-blend-mode



- Sets how an element's content should blend with the content of the element's parent and the element's background.



ℹ️ Creative demo:



https://t.co/kzg2mw9yAJ



https://t.co/WJYOEPh7Ue



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 6, 2020

Day 33: text-orientation



- Sets the orientation of the text characters in a line.

- It only affects text in vertical mode (when writing-mode is not horizontal-tb).



https://t.co/grMRAZ2D8C



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 7, 2020

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.



https://t.co/r5D5TdRDnH



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 8, 2020

Day 35: content



- Replaces an element with a generated value

- Applies to ::before and ::after pseudo-elements



ℹ️ Be aware that some screen reader announce the text



https://t.co/lKya6R4kQn



https://t.co/4ZjZXL8LeD



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 9, 2020

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.



https://t.co/PorF3qmsfP



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 10, 2020

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.



https://t.co/bgGuCwUkwH



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 11, 2020

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.



https://t.co/BwwdaVmdvi



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 12, 2020

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.



https://t.co/ZBB8PmFnCD



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 13, 2020

Day 40: resize



- Sets whether an element is resizable, and if so, in which directions.



ℹ️ You shouldn't use resize: none; for textarea



https://t.co/wiLKtbIunh



https://t.co/USYjrWZItZ



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 14, 2020

Day 41: background-blend-mode



- Sets how an element's background images should blend with each other and with the element's background color.



https://t.co/QBVLLmS2S1



#CSSPropertyInTweet



pic.twitter.com/aqV3isCvCY — Michael Scharnagl (@justmarkup)



February 15, 2020

Day 42: isloation



-Determines whether an element must create a new stacking context.



ℹ️ This property is especially helpful when used in conjunction with mix-blend-mode.



https://t.co/yvW3kujQ44



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 16, 2020

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.



https://t.co/JkWuUFXCRU



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 17, 2020

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.



https://t.co/CCMA49D01C



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 18, 2020

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.



https://t.co/sxpsbri2jp



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 19, 2020

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.



https://t.co/zYhVYjn1Q7



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 20, 2020

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.



https://t.co/Eg1Qd3KAZi



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 21, 2020

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 :-)



https://t.co/JV9zVKTld3



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 22, 2020

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.



https://t.co/PleBHuDPF6



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 23, 2020

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!



https://t.co/CgFcXsxLwt



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 24, 2020

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.



https://t.co/yvI73qtT0e



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 25, 2020

Day 52: tab-size



- Is used to customize the width of tab characters (U+0009).

- The default value for the tab-size property is 8 space characters



https://t.co/P7PhDnECvp



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 26, 2020

Day 53: margin-block



- Defines the logical block start and end margins of an element



ℹ️ More about logical properties and values:



https://t.co/AdGKPGFkVP



https://t.co/atyk48pdfZ



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 27, 2020

Day 54: font-feature-settings



- Controls advanced typographic features in OpenType fonts.



ℹ️ Lots of examples:



https://t.co/6yHo5tbHvk



https://t.co/5aPWsdJPHg



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 28, 2020

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)



https://t.co/8jPaLmQWGT



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



February 29, 2020

Day 56: line-break



- Sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.



https://t.co/fUlpqxPRsn



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 1, 2020

Day 58: writing-mode



- Sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.



https://t.co/7zwoyWb55Z



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 3, 2020

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



https://t.co/pO99ufKqtg



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 4, 2020

Day 60: quotes



- Sets how quotation marks appear.



/* Set open-quote and close-quote to the French quotation marks */



quotes: "«" "»" "‹" "›";



https://t.co/ipLqlHQ9go



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 5, 2020

Day 61: image-rendering



- Sets an image scaling algorithm.

- Values are auto, smooth, high-quality, crisp-edges and pixelated



https://t.co/OkZtGa3S1o



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 6, 2020

Day 62: justify-self



- Sets the way a box is justified inside its alignment container along the appropriate axis.



https://t.co/frjanwHj3D



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 7, 2020

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.



https://t.co/gLGy8W36vR



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 8, 2020

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.



https://t.co/rVCfOvFrA2



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 9, 2020

Day 65: backface-visibility



- 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.



https://t.co/gUyvfEqUNG



#CSSPropertyInTweet



pic.twitter.com/BoOXYJW84h — Michael Scharnagl (@justmarkup)



March 10, 2020

Day 66: opacity



- Sets the opacity of an element.



ℹ️ Browsers can animate opacity cheaply



https://t.co/McNwz7DY2z



https://t.co/sjhEbofYeA



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 11, 2020

Day 67: border-block-end



- Is a shorthand property for setting the individual logical block-end border property value



https://t.co/1qzRHeOQym



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 12, 2020

Day 68: box-decoration-break



- Specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.



https://t.co/ToTEQkl6el



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 13, 2020

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.



https://t.co/8NHhePLv0O



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 14, 2020

Day 70: gap (grid-gap)



- Sets the gaps (gutters) between rows and columns.



ℹ️ Can be used with Flexbox (Supported only in Firefox for now) and with Grid.



https://t.co/IeQ4v0TKi5



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 15, 2020

Day 71: filter



- Applies graphical effects like blur or color shift to an element.



ℹ️ filter: invert(80%); works great to adjust e.g. SVG for dark/light mode



https://t.co/MoSs7oVC2D



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 16, 2020

Day 72: grid



- Is a shorthand property that sets all of the explicit grid properties, and all the implicit grid properties, in a single declaration.



ℹ️ It rocks!



https://t.co/IEzRQo4wJj



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 17, 2020

Day 73: mask-image



- Sets the image that is used as mask layer for an element.



Example:



https://t.co/BOw1LpSkvy



https://t.co/bwYMae31yf



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 18, 2020

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>



https://t.co/KxxZXzhYGt



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 19, 2020

Day 75: order



- 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.



https://t.co/i84A4VIc01



https://t.co/kUH5T8HQv8



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 20, 2020

Day 76: margin



- Sets the margin area on all four sides of an element.



ℹ️ Learn about mastering margin collapsing



https://t.co/uNfSQtiv0G



https://t.co/cpX5S4ZGFi



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 21, 2020

Day 77: orphans



- Sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.



https://t.co/PvZUesvDvb



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 22, 2020

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.



https://t.co/7dRDJF7QrF



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 23, 2020

Day 79: table-layout



- Sets the algorithm used to lay out <table> cells, rows, and columns.



https://t.co/pR4ilvN9Pq



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 24, 2020

Day 80: scrollbar-color



- Sets the color of the scrollbar track and thumb.



ℹ️ As with every color you set, make sure the color contrast is sufficient.



https://t.co/lOkTcCSLTu



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 25, 2020

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.



https://t.co/c3DLcTHYMs



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 26, 2020

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.



https://t.co/p2Kj4cxTqA



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 27, 2020

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.



https://t.co/H2SPAqIv06



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 28, 2020

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>



https://t.co/Jr6UW0Wd7I



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 29, 2020

Day 85: widows



- Sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.



https://t.co/6oTxmYx2cy



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 30, 2020

Day 86: scroll-snap-stop



- Defines whether the scroll container is allowed to "pass over" possible snap positions.



https://t.co/BvCy8UGauR



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



March 31, 2020

Day 88: visibility



- Shows or hides an element without changing the layout of a document.



ℹ️ visibility: hidden removes the element from the accessibility tree



https://t.co/L0VBlgNE1i



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 2, 2020

Day 89: place-items



- Sets the align-items and justify-items properties, respectively.



ℹ️ If the second value is not set, the first value is also used for it.



https://t.co/XLtwvan7NW



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 3, 2020

Day 90: inline-size



- Defines the horizontal or vertical size of an element's block, depending on its writing mode.



https://t.co/5vB4X5klwU



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 4, 2020

Day 91: text-transform



- Specifies how to capitalize an element's text.



ℹ️ Support for language-specific cases varies between browsers



https://t.co/YSDkZVnfz3



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 5, 2020

Day 92: perspective



- Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.



https://t.co/wENb9rGFJj



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 6, 2020

Day 93: shape-outside



- Defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.



ℹ️ The shape editor in Firefox Devtools is really cool



https://t.co/dD9FCVsy9f



https://t.co/lL9UFpRl11



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 7, 2020

Day 94: pointer-events



- Sets under what circumstances (if any) a particular graphic element can become the target of pointer events.



https://t.co/bh6e8MXnGr



input[disabled],

button[disabled] {

pointer-events: none;

}



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 8, 2020

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;



https://t.co/HlgcPw6CD0



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 9, 2020

Day 96: shape-image-threshold



- Sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.



https://t.co/9L3vwVeWSG



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 10, 2020

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.



https://t.co/sgDTQSYCMQ



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 11, 2020

Day 98: perspective-origin



- Determines the position at which the viewer is looking.

- It is used as the vanishing point by the perspective property.



https://t.co/lM8w1wHeId



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 12, 2020

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.



https://t.co/COuqQob1iV



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



April 13, 2020

Day 100: color-adjust



- 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.



https://t.co/A4p89bomZG



#CSSPropertyInTweet — Michael Scharnagl (@justmarkup)



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 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>