Archive results for: CSS Tips

CSS Tip: Adjacent Sibling Selector vs nth-child

With CSS, if you need to style a specific child sibling you can use the nth-child selector:

But if you still need to support legacy browsers (IE8), you need to use a :first-child selector and an adjacent sibling selector instead:

CSS Tip: Character Encoding

The first line of your CSS file should have:

The @charset CSS at-rule specifies the character encoding used in the style sheet.

Some say it is not important anymore because  a browser user agent can easily deduce the character encoding, but I have seen on rare occasions where omitting it has produced unsupported issues on  CSS properties on older browsers (i.e. :before).

So better safe, than sorry. 


CSS Tip: Handling Retina Images

If you want images on your website (especially image buttons with text) to look sharp on retina displays (iPhone 4/5/6, iPad Mini, iPad 3/4), you can create a separate image with double the pixel density.

Which only means creating a version of your images at twice the size, so a 200 x 200px image would become 400x400px. These super sized images are then displayed in the original image size dimensions, which helps create that smooth and crisp appearance on high pixel density screens.

Then just create a media query for only displays that have a pixel ratio of 2:

You should use Apple’s naming convention of @2x for retina images.

There are also JavaScript libraries such as retina.js to handle the media query aspect of it.