You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -146,19 +146,19 @@ SVG scales well for all resolution types and is supported in all browsers back t
146
146
```
147
147
148
148
149
-
### Text Display Optimization
149
+
### Use the "Lobotomized Owl" Selector
150
150
151
-
Sometimes fonts don't display optimally on all devices, so let the device browser help:
151
+
It may have a strange name but using the universal selector (`*`) with the adjacent sibling selector (`+`) can provide a powerful CSS capability:
152
152
153
153
```css
154
-
html {
155
-
-moz-osx-font-smoothing: grayscale;
156
-
-webkit-font-smoothing: antialiased;
157
-
text-rendering: optimizeLegibility;
154
+
*+* {
155
+
margin-top: 1.5em;
158
156
}
159
157
```
160
158
161
-
**Note:**[Please play with `optimizeLegibility` responsibly](https://bocoup.com/weblog/text-rendering/). Also, there's no `text-rendering` support for IE/Edge.
159
+
In this example, all elements in the flow of the document that proceed other elements will receive `margin-top: 1.5em`.
160
+
161
+
For more on the "lobotomized owl" selector, read [Heydon Pickering's post](http://alistapart.com/article/axiomatic-css-and-lobotomized-owls) on *A List Apart*.
162
162
163
163
164
164
### Use `max-height` for Pure CSS Sliders
@@ -180,7 +180,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
0 commit comments