- Hack 01 - Set default color
-
HTML5 Boilerplate suggests the default color looks better when set to #444 instead of #000.
Web font default color - Hack 02 - Vertical Scroll Bar
- Click contract | expand to see how Boilerplate forces a scrollbar in non-IE.
- Hack 03 - Accessible focus style
-
Remove dotted outline around 'a' element on hover and on focus in certain browsers
With Boilerplate CSS | Without Boilerplate CSS
Click me - Hack 04 - Pre Wrapping
-
Default
predoesn't wrap text. Boilerplate forcespreto wrap text.
With Boilerplate CSS | Without Boilerplate CSS
with wrapping:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
without wrapping:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa - Hack 05 - Remove default textarea scrollbar in IE
-
IE shows a disabled scrollbar on empty
textarea.
With Boilerplate CSS | Without Boilerplate CSS
- Hack 06 - IE6,7 legend margin
-
Left align form legend to the inner text in IE 6,7.
With Boilerplate CSS | Without Boilerplate CSS
- Hack 07 - Vertically align checkboxes, radios, text inputs with their label
-
With Boilerplate CSS | Without Boilerplate CSS
Option A
Item B
Name: - Hack 08 - Hand cursor on clickable input elements
-
With Boilerplate CSS | Without Boilerplate CSS
Input with type submit - Hack 09 - Webkit browsers form elements margin
-
Webkit browsers add a 2px margin outside the chrome of form elements.
With Boilerplate CSS | Without Boilerplate CSS
- Hack 10 - Make buttons width rendered correctly
-
IE adds extra padding to
button. This fixes the issue.
With Boilerplate CSS | Without Boilerplate CSS
- Hack 11 - Bicubic resizing for non-native sized IMG
-
IE7 hack to reduce distortion caused by image resizing
With Boilerplate CSS | Without Boilerplate CSS
- Hack 12 - Hide visually
-
Hide elements visually, but have it available for screen readers.
With Boilerplate CSS | Without Boilerplate CSS
showing - Hack 13 - Image text replacement
-
Replace text with images.
With Boilerplate CSS | Without Boilerplate CSS
Apple Touch Icon - Hack 14 - Clear Floats
-
Clear Floated elements without extra markup.
With Boilerplate CSS | Without Boilerplate CSS
text floated lefttext floated rightunfloated text - Hack 15 - PNG fix
- fix pngs for correct display in IE6
