Category Archives: HTML/CSS

HTML/CSS Web Design

The easiest way to optimize .png files for improving page speed

If you have a lot of .png images on the website compressing them can save many bytes of data.
I will show how to do it really fast and easy.

1. We will use Pngcrush. It is an optimizer for PNG (Portable Network Graphics) files. It can be run from a commandline in an MSDOS window, or from a UNIX or LINUX commandline.

To install (Ubuntu/Debian) use command:

apt-get install pngcrush

If you need loselessly optimize one file use command:

pngcrush -rem alla -rem text -reduce -brute in.png out.png

File in.png will be optimized and the result saved in the file out.png

If you need optimize all .png files in the folder use command:

for file in *.png ; do pngcrush -reduce -brute -rem alla -rem gAMA -rem cHRM -rem iCCP -rem sRGB "$file" "${file%.png}-crushed.png" && mv "${file%.png}-crushed.png" "$file" ; done

Optimizing .png images will take no more than couple of minutes but result should be significant:
Before:
1

After:
2

HTML/CSS

CSS Selectors

For sure, everyone can select DOM elements using ID, CLASS and type of the element, but not many know about enormous potential of CSS selectors. In this post I’m going to show all major approaches to select DOM elements.
Please keep in mind that not all of them work in the old browsers.

* – select all elements

X –  select element by its type

#X – select element by its ID

.X – select all elements by its CLASS

.X .Y – select ALL children elements with the class .Y based on the parent element with the class .X

X  Y – select ALL children elements with the type Y based on the parent element  X

X > Y  – select  DIRECT CHILDREN elements with the type Y based on the parent element  X

X + Y – select  the ONE neighbor element Y following right after the element  X

X ~ Y – select  ALL  neighbor elements Y following  after the element  X

X[ATTR] – select all elements that have attribute ATTR

X[ATTR = “VALUE”] – select all elements that have attribute ATTR with value is equal to VALUE

X[ATTR ^= “VAL”] – select all elements that have attribute ATTR with value starts with letters VAL

X[ATTR $= “LUE”] – select all elements that have attribute ATTR with value ends with letters LUE

X[ATTR *= “ALU”] – select all elements that have attribute ATTR with value contains letters ALU

X[ATTR ~= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE.

X[ATTR |= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE. read more »