Tutorial Retina Display Media Query

by in , 0

For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Or other highish-res:

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

Old Stuff (don't use, keeping for posterity)

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1) { 
  
  /* Retina-specific stuff here */

}

This is more future proof...

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific stuff here */

}

Notes:

The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed. Here's the spec on resolution units.

Example:

Let's say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it's best on any screen (retina or not) and not waste any bandwidth. You'd set up 6 media queries, one for each breakpoint and one for each one of those breakpoints on retina. Then you'd override the background image all the way down.

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

Reference URL

Tutorial Removing Dotted Outline

by in , 0 

a {
   outline: 0;
}

Be careful removing outline styles from links, as they are a usability feature. If you do, make sure to define clear focus styles.

If your problem is that the dotted outlines travel all the way to the left or right of the screen because they are floated, try setting the overflow to hidden.

Tutorial Remove Scrollbar from Textarea in IE

by in , 0

By default all versions of IE have a scrollbar on textareas, even when they are empty.

No other browsers do this, so if you want to remove it so IE can visually match other browsers, just:

textarea { overflow: auto; }

The scrollbar will return (rightfully) when the text in the textarea expands beyond it's bounds.

Tutorial Remove Margins for First/Last Elements

by in , 0

It can sometimes be desirable to remove the top or left margin from the first element in a container. Likewise, the right or bottom margin from the last element in a container. You can do this by manually applying classes to the HTML:

.first { margin-top: 0 !important; margin-left: 0 !important; }
.last { margin-bottom: 0 !important; margin-right: 0 !important; }

The "top"/"bottom" zeroing being useful with a vertical stack of elements, "left"/"right" zeroing being useful for horizontal rows (in general). But... this method is dependent on you adding classes to the HTML yourself. Pseudo-selectors can be a better less intrusive way to go:

* > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
* > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }

You may want to replace the * with more specific selectors as per your needs.

"Every Third", etc.

Lets say you had a floated block of 9 elements, 3 by 3. It's very common that you might need to remove the right margin from the 3rd, 6th, and 9th items. The nth-child pseudo-selector might be able to help there:

* > :nth-child(3n+3) { margin-right: 0; }

The equation there, 3n+3, works like this:

(3x0)+3 = 3
(3x1)+3 = 6
(3x2)+3 = 9
etc.

jQuery

jQuery uses CSS3 selectors, which includes :first-child, :last-child, and :nth-child(). This means that in browsers with don't or don't fully support these selectors, they WILL work in jQuery, so you can substitute the CSS support with JavaScript support. For example:

$("* > :nth-child(3n+3)").css("margin-right", 0);

Browser support

:first-child and :last-child works in the latest release from all major browsers, but not in IE 6. :first-child is supported in IE 7+. :nth-child works in Safari 3+, Firefox 3.5+, and Chrome 1+, but still doesn't work in IE8.

Also see David Oliver's article.

Tutorial Remove Gray Highlight When Tapping Links in Mobile Safari

by in , 0 

-webkit-tap-highlight-color: rgba(0,0,0,0);

And then to allow :active styles to work in your CSS on a page in Mobile Safari:

document.addEventListener("touchstart", function(){}, true);

Tutorial Remove Dotted Link Borders

by in , 0

Dotted borders around links are an accessibility feature most browsers have by default. It's for users who must or choose to navigate by keyboard, there is a visual style applied to those links when "tabbed" to. These borders also show up when the link is clicked (in it's "active" state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:

a:active {
    outline: none;
}

NOTE: The advantage here is that the :focus style still will use the outlines, meaning that keyboard navigators will still have the focus styling/visual feedback.

Reference URL

Floated label for Input field WITH CSS ONLY

by 1

Demo:



I use the :valid pseudo class along with the pattern attribute on the input to style the associated label accordingly. 

.field { position:relative; font-family: Arial; text-transform:uppercase; font-weight:bold; display:inline-block; }
label { position:absolute; left:0; top:0; transition: all .2s linear; color:#999; font-size:10px; }
input { margin-top:15px; border:1px solid #999; padding:3px 2px; }
input:invalid + label { top:3px; opacity:0; }
input:valid + label { opacity:1; top:0; }
input:focus { outline:none; }
input:focus + label { color:#33A; }

Problems with this

The label has to appear after the input. I'm using CSS trickery to get it into place. I'd love to be able to put the label first in the content but there's no way to style an element based on the content that comes after it.
It relies on the pattern attribute and the :valid pseudo class, which means that they can't be used for other things like validating email addresses. It'd be nice if there were a different pseudo class that I could use that detected presence of content.