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.
https://t.co/utFCUb6hQz
#CSSPropertyInTweet
pic.twitter.com/YmlkCsB0IB
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
https://t.co/sFpo4rFck6
#CSSPropertyInTweet
pic.twitter.com/WDJgT78sFp
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
https://t.co/zGLWTRfb8Q
#CSSPropertyInTweet
pic.twitter.com/up4M6TWO9w
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 😁
https://t.co/N38gILb57V
#CSSPropertyInTweet
pic.twitter.com/l2hr19mns0
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)
https://t.co/V4CrKbieg9
#CSSPropertyInTweet
pic.twitter.com/tT2CV5kH82
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 */
*,
*::before,
*::after {
box-sizing: border-box;
}
https://t.co/LYRZIk1lBI
#CSSPropertyInTweet
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.
https://t.co/UBFoy6p4ke
#CSSPropertyInTweet
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
https://t.co/59MGEEG3nP
#CSSPropertyInTweet
pic.twitter.com/croTcFXSQD
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.
https://t.co/NUOCA9u9gH
#CSSPropertyInTweet
pic.twitter.com/fPpGfDfgAK
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
https://t.co/XELaH2zRRR
#CSSPropertyInTweet
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
https://t.co/wyvCnNBVsk
#CSSPropertyInTweet
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
https://t.co/oCJ5CvSwUm
#CSSPropertyInTweet
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)
https://t.co/537iNB8zkd
#CSSPropertyInTweet
January 19, 2020
Day 15: animation-delay
— Michael Scharnagl (@justmarkup)
- 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
January 20, 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.
https://t.co/WphlZmZaDB
#CSSPropertyInTweet
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
https://t.co/xlQ1JhsaKD
https://t.co/xwBMV5SuTP
#CSSPropertyInTweet
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
https://t.co/gMdW6u4dhN
#CSSPropertyInTweet
pic.twitter.com/KRds5rPPJM
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.
https://t.co/IL4I2i7knx
#CSSPropertyInTweet
pic.twitter.com/ygo9ouh5xy
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.
https://t.co/tbOuTMokao
#CSSPropertyInTweet
pic.twitter.com/DRfkPgUe3d
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.
https://t.co/SS7M3cJHmr
#CSSPropertyInTweet
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.
https://t.co/IrNuESkzOZ
#CSSPropertyInTweet
pic.twitter.com/BQ1N6nnie3
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.
https://t.co/Ttl5OgRJnp
#CSSPropertyInTweet
pic.twitter.com/1Vn4j3ZHLU
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.
https://t.co/88uhqyOnRE
#CSSPropertyInTweet
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
https://t.co/GnIbDgvOci
#CSSPropertyInTweet
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
https://t.co/kTtWBBjUij
#CSSPropertyInTweet
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.
https://t.co/NjupUrEcq1
#CSSPropertyInTweet
pic.twitter.com/k6HHYeUNf7
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
https://t.co/fAh536rVkv
https://t.co/ujqoSG4Rzl
#CSSPropertyInTweet
pic.twitter.com/fCPVc8n49q
February 2, 2020
Day 29: justify-items
— Michael Scharnagl (@justmarkup)
- Defines the default justify-self for all items of the box
ℹ️ In flexbox layouts, this property is ignored
https://t.co/ayVvQ3E7Lz
#CSSPropertyInTweet
February 3, 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())
https://t.co/ZCn4Wcks6E
#CSSPropertyInTweet
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
https://t.co/CrJTSFegGx
#CSSPropertyInTweet
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:
https://t.co/kzg2mw9yAJ
https://t.co/WJYOEPh7Ue
#CSSPropertyInTweet
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).
https://t.co/grMRAZ2D8C
#CSSPropertyInTweet
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.
https://t.co/r5D5TdRDnH
#CSSPropertyInTweet
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
https://t.co/lKya6R4kQn
https://t.co/4ZjZXL8LeD
#CSSPropertyInTweet
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.
https://t.co/PorF3qmsfP
#CSSPropertyInTweet
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.
https://t.co/bgGuCwUkwH
#CSSPropertyInTweet
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.
https://t.co/BwwdaVmdvi
#CSSPropertyInTweet
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.
https://t.co/ZBB8PmFnCD
#CSSPropertyInTweet
February 13, 2020
Day 40: resize
— Michael Scharnagl (@justmarkup)
- 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
February 14, 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.
https://t.co/QBVLLmS2S1
#CSSPropertyInTweet
pic.twitter.com/aqV3isCvCY
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.
https://t.co/yvW3kujQ44
#CSSPropertyInTweet
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.
https://t.co/JkWuUFXCRU
#CSSPropertyInTweet
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.
https://t.co/CCMA49D01C
#CSSPropertyInTweet
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.
https://t.co/sxpsbri2jp
#CSSPropertyInTweet
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.
https://t.co/zYhVYjn1Q7
#CSSPropertyInTweet
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.
https://t.co/Eg1Qd3KAZi
#CSSPropertyInTweet
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 :-)
https://t.co/JV9zVKTld3
#CSSPropertyInTweet
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.
https://t.co/PleBHuDPF6
#CSSPropertyInTweet
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!
https://t.co/CgFcXsxLwt
#CSSPropertyInTweet
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.
https://t.co/yvI73qtT0e
#CSSPropertyInTweet
February 25, 2020
Day 52: tab-size
— Michael Scharnagl (@justmarkup)
- 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
February 26, 2020
Day 53: margin-block
— Michael Scharnagl (@justmarkup)
- 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
February 27, 2020
Day 54: font-feature-settings
— Michael Scharnagl (@justmarkup)
- Controls advanced typographic features in OpenType fonts.
ℹ️ Lots of examples:
https://t.co/6yHo5tbHvk
https://t.co/5aPWsdJPHg
#CSSPropertyInTweet
February 28, 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)
https://t.co/8jPaLmQWGT
#CSSPropertyInTweet
February 29, 2020
Day 56: line-break
— Michael Scharnagl (@justmarkup)
- Sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
https://t.co/fUlpqxPRsn
#CSSPropertyInTweet
March 1, 2020
Day 57: box-shadow
— Michael Scharnagl (@justmarkup)
- Adds shadow effects around an element's frame.
ℹ️ Generator:
https://t.co/jRiFIKPL1N
https://t.co/JJPeiRy5tq
#CSSPropertyInTweet
March 2, 2020
Day 58: writing-mode
— Michael Scharnagl (@justmarkup)
- 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
March 3, 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
https://t.co/pO99ufKqtg
#CSSPropertyInTweet
March 4, 2020
Day 60: quotes
— Michael Scharnagl (@justmarkup)
- Sets how quotation marks appear.
/* Set open-quote and close-quote to the French quotation marks */
quotes: "«" "»" "‹" "›";
https://t.co/ipLqlHQ9go
#CSSPropertyInTweet
March 5, 2020
Day 61: image-rendering
— Michael Scharnagl (@justmarkup)
- Sets an image scaling algorithm.
- Values are auto, smooth, high-quality, crisp-edges and pixelated
https://t.co/OkZtGa3S1o
#CSSPropertyInTweet
March 6, 2020
Day 62: justify-self
— Michael Scharnagl (@justmarkup)
- Sets the way a box is justified inside its alignment container along the appropriate axis.
https://t.co/frjanwHj3D
#CSSPropertyInTweet
March 7, 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.
https://t.co/gLGy8W36vR
#CSSPropertyInTweet
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.
https://t.co/rVCfOvFrA2
#CSSPropertyInTweet
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.
https://t.co/gUyvfEqUNG
#CSSPropertyInTweet
pic.twitter.com/BoOXYJW84h
March 10, 2020
Day 66: opacity
— Michael Scharnagl (@justmarkup)
- Sets the opacity of an element.
ℹ️ Browsers can animate opacity cheaply
https://t.co/McNwz7DY2z
https://t.co/sjhEbofYeA
#CSSPropertyInTweet
March 11, 2020
Day 67: border-block-end
— Michael Scharnagl (@justmarkup)
- Is a shorthand property for setting the individual logical block-end border property value
https://t.co/1qzRHeOQym
#CSSPropertyInTweet
March 12, 2020
Day 68: box-decoration-break
— Michael Scharnagl (@justmarkup)
- Specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
https://t.co/ToTEQkl6el
#CSSPropertyInTweet
March 13, 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.
https://t.co/8NHhePLv0O
#CSSPropertyInTweet
March 14, 2020
Day 70: gap (grid-gap)
— Michael Scharnagl (@justmarkup)
- 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
March 15, 2020
Day 71: filter
— Michael Scharnagl (@justmarkup)
- 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
March 16, 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!
https://t.co/IEzRQo4wJj
#CSSPropertyInTweet
March 17, 2020
Day 73: mask-image
— Michael Scharnagl (@justmarkup)
- Sets the image that is used as mask layer for an element.
Example:
https://t.co/BOw1LpSkvy
https://t.co/bwYMae31yf
#CSSPropertyInTweet
March 18, 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>
https://t.co/KxxZXzhYGt
#CSSPropertyInTweet
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.
https://t.co/i84A4VIc01
https://t.co/kUH5T8HQv8
#CSSPropertyInTweet
March 20, 2020
Day 76: margin
— Michael Scharnagl (@justmarkup)
- 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
March 21, 2020
Day 77: orphans
— Michael Scharnagl (@justmarkup)
- 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
March 22, 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.
https://t.co/7dRDJF7QrF
#CSSPropertyInTweet
March 23, 2020
Day 79: table-layout
— Michael Scharnagl (@justmarkup)
- Sets the algorithm used to lay out <table> cells, rows, and columns.
https://t.co/pR4ilvN9Pq
#CSSPropertyInTweet
March 24, 2020
Day 80: scrollbar-color
— Michael Scharnagl (@justmarkup)
- 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
March 25, 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.
https://t.co/c3DLcTHYMs
#CSSPropertyInTweet
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.
https://t.co/p2Kj4cxTqA
#CSSPropertyInTweet
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.
https://t.co/H2SPAqIv06
#CSSPropertyInTweet
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>
https://t.co/Jr6UW0Wd7I
#CSSPropertyInTweet
March 29, 2020
Day 85: widows
— Michael Scharnagl (@justmarkup)
- 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
March 30, 2020
Day 86: scroll-snap-stop
— Michael Scharnagl (@justmarkup)
- Defines whether the scroll container is allowed to "pass over" possible snap positions.
https://t.co/BvCy8UGauR
#CSSPropertyInTweet
March 31, 2020
Day 87: text-emphasis-style
— Michael Scharnagl (@justmarkup)
- Sets the appearance of emphasis marks.
https://t.co/A2iwHN8C2n
#CSSPropertyInTweet
pic.twitter.com/JfILoQrMBz
April 1, 2020
Day 88: visibility
— Michael Scharnagl (@justmarkup)
- 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
April 2, 2020
Day 89: place-items
— Michael Scharnagl (@justmarkup)
- 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
April 3, 2020
Day 90: inline-size
— Michael Scharnagl (@justmarkup)
- Defines the horizontal or vertical size of an element's block, depending on its writing mode.
https://t.co/5vB4X5klwU
#CSSPropertyInTweet
April 4, 2020
Day 91: text-transform
— Michael Scharnagl (@justmarkup)
- Specifies how to capitalize an element's text.
ℹ️ Support for language-specific cases varies between browsers
https://t.co/YSDkZVnfz3
#CSSPropertyInTweet
April 5, 2020
Day 92: perspective
— Michael Scharnagl (@justmarkup)
- 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
April 6, 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
https://t.co/dD9FCVsy9f
https://t.co/lL9UFpRl11
#CSSPropertyInTweet
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.
https://t.co/bh6e8MXnGr
input[disabled],
button[disabled] {
pointer-events: none;
}
#CSSPropertyInTweet
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;
https://t.co/HlgcPw6CD0
#CSSPropertyInTweet
April 9, 2020
Day 96: shape-image-threshold
— Michael Scharnagl (@justmarkup)
- Sets the alpha channel threshold used to extract the shape using an image as the value for shape-outside.
https://t.co/9L3vwVeWSG
#CSSPropertyInTweet
April 10, 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.
https://t.co/sgDTQSYCMQ
#CSSPropertyInTweet
April 11, 2020
Day 98: perspective-origin
— Michael Scharnagl (@justmarkup)
- 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
April 12, 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.
https://t.co/COuqQob1iV
#CSSPropertyInTweet
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.
https://t.co/A4p89bomZG
#CSSPropertyInTweet
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>