Stupid CSS Tricks, Part 2

CSS often has a lot of features and techniques who usage and value aren’t always immediately obvious. Sometimes your just meander around come up with an effect without really having a use for it, other times your project really needs something different or off the beaten path.  I suspect most of these in this series will fall in the former group, thus the title.  🙂  If they are well received, I’ll make a regular column of these.

Annoy Users Trying to Copy Text

Frankly, I’m not a fan of this technique but it is an infrequent request from clients to inhibit copying/pasting content from a site. As a designer, I usually try to explain the futility.  As a user, it annoys me beyond measure. This trick is included as an alternative to the old JavaScript method.

.nocopy {
user-select: none;
}

Native Pixel Borders

Big chunky borders have always been ugly.  For a long time a simple 1px solid was fine for most instances, but in a world where a pixel isn’t always a pixel (looking at you, high density mobile devices and screens). The following technique leverages “native device pixels” to try to keep border fine and consistent across multiple user experiences.

<div class="native-pixel">I am a convenient chunk of content.</div> .native-pixel {
box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
.native-pixel {
box-shadow: 0 0 0 0.5px;
}}
@media (min-resolution: 3dppx) {
.native-pixel {
box-shadow: 0 0 0 0.33333333px;
}}
@media (min-resolution: 4dppx) {
.native-pixel {
box-shadow: 0 0 0 0.25px;
}
}}

Style Reset

CSS style resets became essential as browser makers took radically different views of what constituted “default behavior”. Some of the resets employed by designers to try to establish a baseline could get very involved and lengthy.  Still one of the best is by Eric Meyers and runs just a few dozen lines long.

html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, font, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
margin: 0;  
padding: 0;  
border: 0;  
outline: 0;  
font-size: 100%;  
vertical-align: baselinebaseline;  
background: transparent;  
}  
body {  
line-height: 1;  
}  
ol, ul {  
list-style: none;  
}  
blockquote, q {  
quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
content: '';  
content: none;  
}  
  
/* remember to define focus styles! */  
:focus {  
outline: 0;  
}  
  
/* remember to highlight inserts somehow! */  
ins {  
text-decoration: none;  
}  
del {  
text-decoration: line-through;  
}  
  
/* tables still need 'cellspacing="0"' in the markup */  
table {  
border-collapse: collapse;  
border-spacing: 0;  
}

Need to pull out the big guns on resetting? Check out normalize.css. Does the reset above seem like overkill? You may be able to get away with just a simple “most common problem” reset like this one:

* { all: initial; }
* { box-sizing: border-box; margin: 0; padding: 0; }