-
Notifications
You must be signed in to change notification settings - Fork 4
/
atom.xml
356 lines (238 loc) · 17.5 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: CSS | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/css/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
<updated>2012-11-14T21:51:45-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
<email><![CDATA[tj.vantoll@gmail.com]]></email>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[Creating Cross Browser Scrollable <tbody>s - A CSS Only Approach]]></title>
<link href="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/"/>
<updated>2012-11-10T15:44:00-05:00</updated>
<id>http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody</id>
<content type="html"><![CDATA[<p>By default the <code>overflow</code> CSS property does not apply to table group elements (<code><thead></code>, <code><tbody></code>, or <code><tfoot></code>). <a href="https://developer.mozilla.org/en-US/docs/Firefox_4_for_developers#Miscellaneous_CSS_changes">As of Firefox 4</a> this behavior is consistent across all browser implementations.</p>
<p>Therefore, if you attempt to apply a CSS <code>height</code> and <code>overflow: scroll</code> to a <code><tbody></code> it will have no effect in modern browsers. You can see this for yourself <a href="http://jsfiddle.net/tj_vantoll/vU494/">here</a>.</p>
<p>But having a scrolling table body with fixed headers is a useful UI element, so how do you work around this?</p>
<!--more-->
<h3>The Solution</h3>
<p>Here is my solution:</p>
<p><pre class="codepen" data-height="400" data-type="result" data-href="JEKIu" data-user="tjvantoll"><code></code></pre>
<script async src="http://codepen.io:/assets/embed/ei.js"></script></p>
<h3>How does it work?</h3>
<p>The first step is to set the <code><tbody></code> to <code>display: block</code> so an <code>overflow</code> and <code>height</code> can be applied. From there the rows in the <code><thead></code> need to be set to <code>position: relative</code> and <code>display: block</code> so that they'll sit on top of the now scrollable <code><tbody></code>.</p>
<p>That's really about it.</p>
<h3>Unfortunate Part #1: Old Internet Explorer</h3>
<p>When you set a <code>height</code> on a <code><tbody></code> Internet Explorer < 10 applies that <code>height</code> to every table cell, which is of course wonderful.</p>
<p>My workaround for this is to conditionally create a wrapper <code><div></code>. When it's present I give it the <code>height</code> and <code>overflow</code> and remove the <code>height</code> from the <code><tbody></code>.</p>
<p>``` html Wrap table for IE</p>
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->
<pre><code><table>
<!-- Contents of the table -->
</table>
</code></pre>
<!--[if lte IE 9]>
</div>
<!--<![endif]-->
<p>```</p>
<p>The headers will scroll with the table body, but the table will at least be usable. You could also create <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">conditional classes on the <html> tag</a> to handle this as well.</p>
<h3>Unfortunate Part #2: Widths</h3>
<p>Because the <code><thead></code> is relatively positioned each table cell needs an explicit <code>width</code>.</p>
<p><code>css
td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
</code></p>
<p>But unfortunately that is not enough. When a scrollbar is present browsers allocate space for it, therefore, the <code><tbody></code> ends up having less space available than the <code><thead></code>. Notice the slight misalignment this creates:</p>
<p><img src="/images/posts/2012-11-10/Alignment-Issue.png" title="Alignment issue with scroll bar" alt="Alignment issue with scroll bar" /></p>
<p>The only workaround I could come up with was to set a <code>min-width</code> on all columns except the last one.</p>
<p><code>css
td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
</code></p>
<h3>The Good</h3>
<p>Despite these issues the solution does work in all browsers back to IE6 with no JavaScript dependency.</p>
<p>The markup to create the table is simple and semantic. I've seen workarounds for this issue that use <code><div></code>s instead of <code><table></code>s or multiple aligned <code><table></code>s and those always felt dirty to me.</p>
<p>The code is free to use and do whatever you want with it. If you have any suggestions for improvements or find any issues please let me know in the comments.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Creating a Polished Vertical Tabs Interaction with jQuery UI]]></title>
<link href="http://tjvantoll.com/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/"/>
<updated>2012-11-08T00:00:00-05:00</updated>
<id>http://tjvantoll.com/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui</id>
<content type="html"><![CDATA[<p>The <a href="http://jqueryui.com/tabs/">jQuery UI tabs widget</a> provides a clean way to implement a tabular UI. Furthermore, the markup used gives you ample hooks to make the tabs visually into what you want them to be. The docs provide a <a href="http://jqueryui.com/tabs/#vertical">simple demo</a> of how you can give the tabs a vertical orientation, but I thought I'd show how you can use what the framework provides to create something a bit more polished.</p>
<!--more-->
<p>Here's an example:</p>
<iframe style="width: 100%; height: 350px;" src="http://jsfiddle.net/tj_vantoll/nn2Qw/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>Please poke around in the source to see how it was made. Feel free to use this or modify it to your liking.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Adding Pointers to jQuery UI Tooltips]]></title>
<link href="http://tjvantoll.com/2012/10/24/adding-pointers-to-jquery-ui-tooltips/"/>
<updated>2012-10-24T20:58:00-04:00</updated>
<id>http://tjvantoll.com/2012/10/24/adding-pointers-to-jquery-ui-tooltips</id>
<content type="html"><![CDATA[<p>The recent <a href="http://jqueryui.com/changelog/1.9.0/">jQuery UI 1.9 release</a> included a new <a href="http://jqueryui.com/tooltip/">tooltip plugin</a> that can be used to create tooltips much like the native tooltips the browser provides. The difference is that jQuery UI's version are completely customizable. As such I thought I'd show a quick example of how you can create a pointer from the tooltip to its associated field:</p>
<!--more-->
<iframe style="width: 100%; height: 350px;" src="http://jsfiddle.net/tj_vantoll/kyBwU/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>So how is this done?</p>
<ul>
<li>The <a href="http://api.jqueryui.com/tooltip/#option-position">position</a> option is used to place the tooltip appropriately around the textbox. Importantly the <code>collision</code> property is set to <code>none</code>, since, if the tooltip were to be repositioned the arrow would be placed incorrectly.</li>
<li>The pointers themselves are created using using the <code>::after</code> and <code>::before</code> pseudo-elements. For some more information on the technique and to see some other variations there's an excellent tutorial <a href="http://nicolasgallagher.com/pure-css-speech-bubbles/">here</a>.</li>
<li>Since the <code>::after</code> and <code>::before</code> pseudo-elements are used to create the pointers, IE <= 8 users will not see them. However, they'll simply see the default pointerless tooltip, no harm done.</li>
</ul>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Using the Attribute Selector with Numeric Values]]></title>
<link href="http://tjvantoll.com/2012/09/19/using-the-attribute-selector-with-numeric-values/"/>
<updated>2012-09-19T20:42:00-04:00</updated>
<id>http://tjvantoll.com/2012/09/19/using-the-attribute-selector-with-numeric-values</id>
<content type="html"><![CDATA[<p>What color will the number 3 be in the example below?</p>
<p>``` html</p>
<table>
<tr>
<td colspan="2">1</td>
</tr>
<td>
<td>2</td>
<td>3</td>
</tr>
</table>
<p>```</p>
<p>Turns out it will be red because the <code>td[colspan=2]</code> selector does not match it. Why?</p>
<!--more-->
<h3>Attribute Selector</h3>
<p>Per the <a href="http://www.w3.org/TR/css3-selectors/#attribute-selectors">CSS 3 specification</a> values used in attribute selectors must be either identifiers or strings.</p>
<p>String values are those enclosed by single or double quotes (e.g. the <code>2</code> in the selector <code>value="2"</code>). If a value is not a string the browser attempts to resolve it as an identifier, which the spec defines as such:</p>
<p><blockquote><p>"In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit."</p><footer><strong>CSS 2.1 Specification</strong> <cite><a href='http://www.w3.org/TR/CSS2/syndata.html#value-def-identifier'>www.w3.org/TR/CSS2/…</a></cite></footer></blockquote></p>
<p>So why doesn't <code>colspan=2</code> work above? The key part from the spec is that "<em>identifiers ... cannot start with a digit</em>". Therefore, since <code>2</code> is not a string and does not qualify as an identifier, the browser ignores it. This behavior is implemented consistently in all browsers.</p>
<p>The fix? Simply wrap the value in quotes; both <code>td[colspan='2']</code> and <code>td[colspan="2"]</code> will match the cell in the example above.</p>
<h3>Numeric Attributes</h3>
<p>Attributes that generally only have numeric values include <code>colspan</code>, <code>rowspan</code>, <code>cellpadding</code>, <code>cellspacing</code>, <code>min</code>, <code>max</code>, and <code>step</code>. When using any of these attributes in an attribute selector ensure that you wrap the value in quotes.</p>
<h3>JavaScript</h3>
<p>Most selector engines such as jQuery's sizzle will make the selector work regardless of whether the quotes are present. <code>$('td[colspan=2]')</code> will return the cell in question in the example above.</p>
<p>However, if you are using native JavaScript though you will not be so lucky; <code>document.querySelectorAll('td[colspan=2]')</code> actually throws an error.</p>
<h3>Conclusion</h3>
<p>Attributes with numeric values need to have quotes around them when using them in CSS or JavaScript. When in doubt use quotes around attribute values; it never hurts, and there are some strange edge cases where omitting the quotes leads to unexpected behavior. If you're looking for a more detailed writeup on when quotes are ok to omit checkout <a href="http://mathiasbynens.be/notes/unquoted-attribute-values">Mathias Bynens' writeup on the topic</a>.</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[Default Browser Handling of the CSS text-transform Property]]></title>
<link href="http://tjvantoll.com/2012/07/10/default-browser-handling-of-the-css-text-transform-property/"/>
<updated>2012-07-10T21:05:00-04:00</updated>
<id>http://tjvantoll.com/2012/07/10/default-browser-handling-of-the-css-text-transform-property</id>
<content type="html"><![CDATA[<p>The <code>text-transform</code> CSS property is most frequently used to uppercase and lowercase text. According to the <a href="http://www.w3.org/TR/CSS21/text.html#caps-prop">CSS 2.1 specification</a> it is also an inherited property, meaning, when no value is specified on a given element, it should inherit its parent's <code>text-transform</code> value.</p>
<p>If no parents have a <code>text-transform</code> property defined, the element will take on the default value of <code>none</code>.</p>
<p>Where it gets interesting is that all browsers define default <code>text-transform</code> properties for certain form elements. What does this mean? <!--more-->Let's say you have the following markup:</p>
<p>``` html</p>
<div>
<input type="text" value="foo" />
<input type="submit" value="bar" />
</div>
<p>```</p>
<p>Both <code>foo</code> and <code>bar</code> will appear lowercased in all major browsers. You can see this for yourself below:</p>
<iframe style="width: 100%; height: 120px;" src="http://jsfiddle.net/tj_vantoll/DxANv/1/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>This happens because all browser vendors include <code>text-transform: none</code> in their user agent stylesheet for those elements. Therefore the <code>text-transform: uppercase</code> rule declared on the parent node is not inherited.</p>
<p>Unfortunately, but not surprisingly, browsers are not consistent about their default values for all elements.</p>
<h3>What the Browsers Do</h3>
<p>The following chart shows popular browser rendering engines and whether their user agent stylesheet includes <code>text-transform: none</code> for the listed elements.</p>
<table>
<thead>
<tr>
<th>Rendering Engine</th>
<th>input[type=submit]</th>
<th>input[type=text]</th>
<th>select</th>
<th>textarea</th>
<th>button</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident (Internet Explorer)</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td><strong>No</strong></td>
</tr>
<tr>
<td>Gecko (Firefox)</td>
<td>Yes</td>
<td>Yes</td>
<td><strong>No</strong></td>
<td>Yes</td>
<td><strong>No</strong></td>
</tr>
<tr>
<td>WebKit (Chrome, Safari, etc...)</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>Presto (Opera)</td>
<td>Yes</td>
<td>Yes</td>
<td><strong>No</strong></td>
<td>Yes</td>
<td><strong>No</strong></td>
</tr>
</tbody>
</table>
<p>The rendering engines that have a <strong>No</strong> for a given element declare no default for <code>text-transform</code>. Therefore, those elements will inherit the value from their parent.</p>
<h3>What Does This Mean?</h3>
<p>The browser differences occur on the <code>button</code> and <code>select</code> elements. Therefore, if you apply a <code>text-transform</code> value to a node, AND that node has children <code>button</code> / <code>select</code> nodes, AND you do not apply a <code>text-transform</code> value to the <code>button</code> or <code>select</code> nodes themselves... you'll get different behavior in different browsers.</p>
<p>For example:</p>
<p>``` html
<!DOCTYPE html>
<html></p>
<pre><code><head>
<style>
form { text-transform: uppercase; }
</style>
</head>
<body>
<form>
<!-- "foo" will be uppercase in IE, Firefox, and Opera -->
<!-- "foo" will be lowercase in WebKit based browsers -->
<button>foo</button>
<!-- "bar" will be uppercase in Firefox and Opera -->
<!-- "bar" will be lowercase in IE and WebKit based browsers -->
<select>
<option>bar</option>
</select>
</form>
</body>
</code></pre>
<p></html>
```</p>
<h3>Consistency</h3>
<p>You could make arguments as to whether the user agent stylesheets <em>should</em> be defaulting the <code>text-transform</code> of various form elements to <code>none</code>, but to most people all that matters is that the behavior is consistent. It's easy enough to override the defaults if you don't like them.</p>
<p>Therefore to get consistent behavior you would <em>think</em> you would need to set the default value of <code>button</code> and <code>select</code> elements to either <code>none</code> or <code>inherit</code>.</p>
<p>``` css
/<em> Option 1 - Don't inherit values in all browsers </em>/
button, select { text-transform: none; }</p>
<p>/<em> Option 2 - Inherit values in all browsers </em>/
button, select { text-transform: inherit; }
```</p>
<p>But unfortunately for whatever reason Option 2 doesn't work on the <code><select></code> in IE <= 7, Safari, and most interestingly, doesn't take effect in Chrome until you click on <code><select></code>. You can verify this behavior for yourself below:</p>
<iframe style="width: 100%; height: 120px;" src="http://jsfiddle.net/tj_vantoll/dUjXB/10/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<p>Fortunately Option 1 does indeed produce the same behavior in IE6+, Firefox, Chrome, Safari, and Opera. Therefore to normalize <code>text-transform</code> you need to include the following in your stylesheet.</p>
<p><code>css Cross Browser text-transform Goodness
button, select { text-transform: none; }
</code></p>
]]></content>
</entry>
</feed>