The ABCs of CSS You've Likely Never Used

Transcript

1. 1.

   The ABCs of CSS Properties You’ve Likely Never Used (Well,

   Mostly!) Alicia Sedlock | @aliciability
2. 2.

   Hi!

3. 3.

   None
4. 4.

   What’s your favorite CSS property or module?

5. 5.

   None
6. 6.

   There’s a lot of CSS I don't know.

7. 7.

   A additive-symbols “… specify symbols when the value of a

   counter system descriptor is additive.”
8. 8.

   @counter-style custom-counter { system: additive;
 additive-symbol: I 1; }
 .list

   { list-style: custom-counter;
 
 }
9. 9.

   @counter-style custom-counter { system: additive;
 additive-symbol: “>” 3; }
 .list

   { list-style: customer-counter;
 
 }
10. 10.

    @counter-style custom-counter { system: additive;
 additive-symbol: “X” 10, “V” 5,

    “I” 1; }

11. 11.

    B ::backdrop
 
 “…is a box rendered immediately below any

    element rendered in fullscreen mode.”
12. 12.

    dialog { /* some dialog styles */ } dialog::backdrop {


    
 background: black;
 opacity: .5;
 
 }
13. 13.

    None
14. 14.

    C caret-color
 
 “…sets the color of the caret in

    an element.”
15. 15.

    input.custom { caret-color: red; }

16. 16.

    None
17. 17.

    D :default
 
 “…represents any user interface element that is

    the default among a group of similar elements.”
18. 18.

    :default { background-color: pink; } <form> <input type=“button” value=“Button” />

    <input type=“submit” /> <input type=“reset” /> </form>
19. 19.

    None
20. 20.

    E :empty
 
 “ ..any element that has no children

    at all.”
21. 21.

    div {
 
 background: lightblue;
 
 } div:empty {
 


    background: pink;
 
 } <div><!— No content —></div> <div>Hello world!</div> <div>
 <!— No content —>
 </div>
22. 22.

    None
23. 23.

    F ::first-letter
 
 “…applies styles to the first letter of

    the first line of a block-level element…”
24. 24.

    p::first-letter {
 
 color: red;
 font-size: 3em;
 font-weight: bold;
 


    }
 
 <p>The quick brown fox</p>
25. 25.

    p::first-letter {
 
 color: red;
 font-size: 3em;
 font-weight: bold;
 


    }
 
 <p>
 <img src=“fox.jpg” />
 The quick brown fox
 </p>
26. 26.

    G grayscale()

27. 27.

    .fox1 { filter: grayscale(.95); } .fox2 { filter: grayscale(.55); }

    .fox3 { filter: grayscale(.15); }
28. 28.

    H hyphens
 
 “…how words should be hyphenated when text

    wraps across multiple lines.”
29. 29.

    <p>That Conference is extreme&shy;ly rad!</p> p {
 hyphens: none;
 width:

    55px;
 }
30. 30.

    <p>That Conference is extreme&shy;ly rad!</p> p {
 hyphens: manual;
 width:

    55px;
 }
31. 31.

    <p>That Conference is extreme&shy;ly rad!</p> p {
 hyphens: auto;
 width:

    55px;
 }
32. 32.

    I :in-range
 
 “…matches when the value currently contained inside

    an <input> element is inside the range limits specified by the min and max attributes.”
33. 33.

    None
34. 34.

    <label>Enter a number 1-10</label>
 <input type="number" min="1" max="10" value="12" />


    
 input:in-range {
 background-color: rgba(0, 255, 0, 0.25);
 }
 
 input:out-of-range {
 background-color: rgba(255, 0, 0, 0.25);
 border: 2px solid red;
 }
35. 35.

    None
36. 36.

    J justify-content
 ONLY ENTRY
 
 “…defines how the browser distributes

    space between and around content items along the main axis of their container.”
37. 37.

    .container {
 display: flex;
 justify-content: <value>;
 } <div class=“container”>
 <div><!—

    Content! —></div>
 <div><!— Content! —></div>
 <div><!— Content! —></div>
 </div>
38. 38.

    .container {
 display: flex;
 justify-content: flex-start;
 } <div class=“container”>
 <div><!—

    Content! —></div>
 <div><!— Content! —></div>
 <div><!— Content! —></div>
 </div>
39. 39.

    .container {
 display: flex;
 justify-content: flex-end;
 } <div class=“container”>
 <div><!—

    Content! —></div>
 <div><!— Content! —></div>
 <div><!— Content! —></div>
 </div>
40. 40.

    .container {
 display: flex;
 justify-content: center;
 } <div class=“container”>
 <div><!—

    Content! —></div>
 <div><!— Content! —></div>
 <div><!— Content! —></div>
 </div>
41. 41.

    .container {
 display: flex;
 justify-content: space-around;
 } <div class=“container”>
 <div><!—

    Content! —></div>
 <div><!— Content! —></div>
 <div><!— Content! —></div>
 </div>
42. 42.

    .container {
 display: flex;
 justify-content: space-between;
 } <div class=“container”>
 <div><!—

    Content! —></div>
 <div><!— Content! —></div>
 <div><!— Content! —></div>
 </div>
43. 43.

    K khz
 
 “…represents a frequency dimension, such as the

    pitch of a speaking voice.”
44. 44.

    p.low { pitch: 105Hz; } em.high { pitch: 135Hz; }

45. 45.

    L :lang
 
 “…matches elements based on the language the

    element is determined to be in.”
46. 46.

    <html lang=“en”></html>

47. 47.

    <div lang=“en”>Hello, world!</div> <div lang=“fr”>Bonjour, le monde!</div> <div lang=“de”>Hallo, Welt!</div>

48. 48.

    
 :lang(en) { border: 1px solid red; } :lang(fr) {

    border: 1px solid blue; } :lang(de) { border: 1px solid black; }
49. 49.

    M max-zoom
 
 “…sets the maximum zoom factor of a

    document defined by the @viewport at- rule."
50. 50.

    * { max-zoom: 150%;
 
 max-zoom: 2.0; }

51. 51.

    N negative
 
 “…alters the representation of negative counter values,

    by providing a way to specify symbols to be appended or prepended to the counter representation when the value is negative.”
52. 52.

    <ul class="list" start="-3"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>

53. 53.

    @counter-style negative-counter { system: numeric;
 symbols: "0" "1" "2" "3"

    "4" "5" "6" "7" "8" "9";
 negative: "(-" ")"; } .list { list-style: negative-counter; }
54. 54.

    None
55. 55.

    O object-fit
 
 “…how a replaced element, such as an

    <img> or <video>, should be resized to fit its container.”
56. 56.

    /* Base styles for examples */
 img { width: 400px;

    height: 500px; border: 5px solid pink; object-fit: <value>; }
57. 57.

    None
58. 58.

    None
59. 59.

    None
60. 60.

    None
61. 61.

    None
62. 62.

    P pointer-events
 
 “…specifies under what circumstances a particular graphic

    element can become the target of mouse events.”
63. 63.

    div {
 
 pointer-events: none; }

64. 64.

    <div> Lorem ipsum dolor sit amet… </div> <div class="overlay"> I

    am an overlay. Try selecting the text behind me. </div>
65. 65.

    .overlay { position: absolute; top: 0; left: 40%; background: rgba(0,0,0,.75);

    height: 200px; width: 250px; color: white; padding: 1em; pointer-events: auto; }
66. 66.

    pointer-events: auto

67. 67.

    pointer-events: none

68. 68.

    pointer-events: visiblePainted;
 pointer-events: visibleFill;
 pointer-events: visibleStroke;
 pointer-events: visible;
 pointer-events: painted;


    pointer-events: fill;
 pointer-events: stroke;
 pointer-events: all;
69. 69.

    Q quotes
 
 “…indicates how user agents should render quotation

    marks.”
70. 70.

    <span>According to Groot, <q>I am Groot.</q>.</span> 
 q { quotes:

    "**" “**”; } q:before { content: open-quote; } q:after { content: close-quote; }
71. 71.

    <span>Peter Quill says <q>I'm pretty sure the answer is <q>I

    am Groot</q>.</q></span> 
 q { quotes: ’””’ ‘“”’ “‘’” “‘’”; } q:before { content: open-quote; } q:after { content: close-quote; }
72. 72.

    R revert
 
 “…rolls back the cascade so that a

    property takes on the value it would have had if there were no styles in the current style origin"
73. 73.

    None
74. 74.

    S suffix
 
 “…specifies a symbol that will be appended

    to the marker representation.”
75. 75.

    <ul class="list"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul>

76. 76.

    @counter-style counter-options { system: fixed;
 symbols: A B C D

    E F G;
 suffix: “) ”; } .list { list-style: counter-options; }
77. 77.

    None
78. 78.

    T tab-size
 
 “…used to customize the width of a

    tab (U+0009) character.”
79. 79.

    pre { tab-size: 4; /* integer values */
 tab-size: 2;


    tab-size: 10px; /* length values */
 tab-size: 2em; }
80. 80.

    <pre class=“default"> &#9;This is a line in pre! &#9;CSS is

    a lot of fun. :) </pre> pre { border: 1px solid black;
 width: 500px; }
81. 81.

    <pre class=“default"> &#9;This is a line in pre! &#9;CSS is

    a lot of fun. :) </pre> pre { border: 1px solid black;
 width: 500px;
 tab-size: 4; }
82. 82.

    <pre class=“default"> &#9;This is a line in pre! &#9;CSS is

    a lot of fun. :) </pre> pre { border: 1px solid black;
 width: 500px;
 tab-size: 100px; }
83. 83.

    U unset
 
 “…resets a property to its inherited value

    if it inherits from its parent, and to its initial value if not.”
84. 84.

    <p>I want to be blue text!</p> <div class="foo"> <p>I want

    to be orange text :(</p> </div> <div class="bar"> <p>I don't want to be orange.</p> </div> .foo { color: orange; } .bar { color: green; } p { color: blue; } .bar p { color: unset; }
85. 85.

    None
86. 86.

    V vw/vh “Equal to 1% of the width/height of the

    viewport's initial containing block.”
87. 87.

    W will-change “…provides a way for authors to hint browsers

    about the kind of changes to be expected on an element, so that the browser can set up appropriate optimizations ahead of time…”
88. 88.

    div {
 will-change: transform;
 will-change: opacity;
 will-change: contents; /* custom-ident

    */
 will-change: scroll-behavior; /* custom-ident */
 }
89. 89.

    A warning on will-change • Intended as a “last resort”

    - don’t prematurely optimize • Meant to be used sparingly
90. 90.

    X
 Y

91. 91.

    * { xtreme: ‘heck-yeah’; }

92. 92.

    * { yolo: 100; }

93. 93.

    Z z-index “… specifies the z-order of a positioned element

    and its descendants.”
 

94. 94.

    What the heck do I do with this now?

95. 95.

    Depth of CSS

96. 96.

    Some of these things are • Experimental technology • In

    working draft • In initial definition
97. 97.

    Grid Layout Hype

98. 98.

    P pointer-events
 
 “…specifies under what circumstances a particular graphic

    element can become the target of mouse events.”
99. 99.

    None
100. 100.

     None
101. 101.

     A Challenge

102. 102.

     None
103. 103.

     Thank you.