CSS has two very important properties on determining the position of an element in webpage: display and position. display is used to determine how elements are grouped and displayed on the page. While position is used to determine the exact position of an element on a page. And this post would explain position property in detail.position is used to determine the exact position of an element on a page. It has five possible values.staticrelativeabsolutefixedstickysticky is supported starting from 2017 in browsers and it would be explained more later.staticstatic is the default value of the posit...

calc function is a function introduced in CSS3, it can be used to calculate length values. There are a few good features which make it suitable for aligning an element vertically.One good part is that the operands can have different units like percentage, px, rem etc. This makes it very flexible when calculating the length value. One example:.rect{ margin-top:20px; height:50px; background:green; width:calc(100%-20px);}Here the left operand uses percentage while the right one uses px, they can work perfectly without any conflict.The result of calc is dynamic but not pre -calculated....

jQuery is now the most famous JavaScript library. There are around 57.3% websites in the world using jQuery, i.e, 6 out of 10 websites are using jQuery. If we only consider those websites which use libraries, then the percentage is even higher which is 91.7%.Although jQuery is very popular, its size is still a headache to many websites maintainers. The uncompressed jQuery 2.0 has a size of 235KB, the size is 81KB after optimization.The jQuery 1.8.3 which supports IE 6/7/8 has a uncompressed size of 261KB, the size is 91KB after optimization.It takes around 1 second to load this file, it may ta...

With the popularity of Retina screen, the requirement of the images in the webpages is higher. How to make sure the image still clear while enlarging twice on retina screen? This brings much trouble to web developers, the good news is CSS3 and HTML5 is trying to change this, we can use response image.What is responsive image?It means user agent loads different images according to different resolutions of output devices, it will not waste bandwidth as well. In addition, it can load respective images when the resolution of the device changes.CSS responsive imageiOS developers should be familiar ...

About a year and a half ago, I wrote about CSS3′s word-wrap property. The angle of the article was the fact that it was a feature that was new in CSS3 that didn’t exist in CSS2.1 and it worked in just about every browser, including old IE.Well, now that’s all changed, which I discovered while researching additions to my CSS3 Click Chart. The word-wrap property has been removed from the CSS3 spec and other related properties have been added.Text-WrapThe text-wrap property “specifies the mode for text wrapping”. Well, that description doesn’t tell us a whol...