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
1.[Get Rid of Margin Hacks With Flexbox](#get-rid-of-margin-hacks-with-flexbox)
16
+
1.[Use Attribute Selectors with Empty Links](#use-attribute-selectors-with-empty-links)
16
17
17
18
18
19
### Use `:not()` to Apply/Unapply Borders on Navigation
@@ -45,6 +46,14 @@ Instead of putting on the border...
45
46
46
47
It's clean, readable, and easy to understand without the need for hack-y code.
47
48
49
+
Or, alternatively, since your new elements might be siblings, use the general sibling selector (`~`) and turn the problem on its head:
50
+
51
+
```css
52
+
.navli:first-child~li {
53
+
border-left: 1pxsolid#666;
54
+
}
55
+
```
56
+
48
57
49
58
### Add Line-Height to `body`
50
59
@@ -139,7 +148,7 @@ html {
139
148
}
140
149
```
141
150
142
-
**Note:**There is no `text-rendering` support for IE/Edge.
151
+
**Note:**[Please play with `optimizeLegibility` responsibly](https://bocoup.com/weblog/text-rendering/). Also, there's no `text-rendering` support for IE/Edge.
143
152
144
153
145
154
### Use `max-height` for Pure CSS Sliders
@@ -149,6 +158,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
149
158
```css
150
159
.sliderul {
151
160
max-height: 0;
161
+
overlow: hidden;
152
162
}
153
163
154
164
.slider:hoverul {
@@ -157,8 +167,6 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
157
167
}
158
168
```
159
169
160
-
You can animate to "auto" height!
161
-
162
170
163
171
### Inherit `box-sizing`
164
172
@@ -193,6 +201,8 @@ Pain-free table layouts.
193
201
194
202
### Get Rid of Margin Hacks With Flexbox
195
203
204
+
When working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property:
205
+
196
206
```css
197
207
.list {
198
208
display: flex;
@@ -204,7 +214,21 @@ Pain-free table layouts.
204
214
}
205
215
```
206
216
207
-
When working with column gutters you can get rid of `nth-`, `first-`, and `last-child` hacks by using flexbox's `space-between` property.
217
+
Now column gutters always appear evenly-spaced.
218
+
219
+
220
+
### Use Attribute Selectors with Empty Links
221
+
222
+
Display links when the `<a>` element has no text value but the `href` attribute has a link:
0 commit comments