The following one-liner will help you remove comments, spaces, and more from your CSS files. Suggestions are always welcomed.
Important: Before running this command, create a copy of your original file. Try the resulting CSS in a test environment before releasing it.
cat style.css | sed -e ' s/^[ t]*//g; # leading spaces s/[ t]*$//g; # trailing spaces s/([:{;,]) /1/g; # spaces after a colon, brace, semicolon, or comma s/ {/{/g; # spaces before a brace /^$/d # blank lines ' | sed -e :a -e '$!
So you got a new iPad and realized your images do not look as good as they do on your computer, right? Don’t worry, there is a very simple way to achieve good looking images on this device:
If you want to create a 500 x 500 px on a Retina display, create an image at 1000 x 1000 and then use CSS to control the image size down to 500 x 500:
Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we’re not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts.
To get a sense of emerging responsive design layout patterns, I combed through all the examples curated on the Media Queries gallery site several times.
Attribute selectors allow you to select CSS elements based on their attributes or values.
For example, if you want to select an image named “great.gif” you can do it by using the following rule:
img[src="great.gif"] { border: 3px solid #000; } There are four types of selectors.
By attribute. The following example will select all the images that contain the given attribute:
img[title] { border: 3px solid #000; } img[width] { border: 3px solid #000; } img[alt] { border: 3px solid #000; } By value.
