How do speed up web pages? CSS & HTML tricks - Swati Arora
Some EASY tricks <ul><li>CSS font shorthand rule </li></ul><ul><li>Two classes together </li></ul><ul><li>CSS Sprites </li...
CSS font shorthand rule When styling fonts with CSS you may be doing this: font-size: 1em; line-height: 1.5em; font-weight...
Two classes together <p class=&quot;text pad&quot;>...</p> Using these two classes together (separated by a space, not wit...
CSS Sprites BELOW #nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.g...
CSS Sprites - Buttons HTML <div class=&quot;clearbutton&quot;> <a class=&quot;GlobalOrangeButton&quot; href=&quot;#&quot;>...
!important ignored by IE Normally in CSS whichever rule is specified last takes precedence. However if you use  !important...
Google Web Fonts <ul><li>The Google Font API helps you add web fonts to any web page. </li></ul><ul><li>Benefits of the Go...
Text Wrapping .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } A long cold wint...
.transparent_class { /* IE 8 */ -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;; /* IE 5-7 */ ...
Intro to HTML 5
Benefits of HTML 5 <ul><li>Less Header codes </li></ul><ul><li>More semantic HTML tags </li></ul><ul><li>Media Tags </li><...
Intro to HTML 5 The new structural elements <header> <nav> <section> <article> <aside> <footer>
Lets check this
 
Upcoming SlideShare
Loading in...5
×

How do speed up web pages? CSS & HTML Tricks

1,565

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,565
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How do speed up web pages? CSS & HTML Tricks

  1. 1. How do speed up web pages? CSS & HTML tricks - Swati Arora
  2. 2. Some EASY tricks <ul><li>CSS font shorthand rule </li></ul><ul><li>Two classes together </li></ul><ul><li>CSS Sprites </li></ul><ul><li>!important ignored by IE </li></ul><ul><li>Image replacement technique </li></ul><ul><li>Google web fonts </li></ul><ul><li>Text Wrapping </li></ul><ul><li>Cross browser Opacity </li></ul>
  3. 3. CSS font shorthand rule When styling fonts with CSS you may be doing this: font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-varient: small-caps; font-family: verdana,serif font: 1em/1.5em bold italic small-caps verdana,serif NOTE: This CSS shorthand version will only work if you're specifying both the font-size and the font-family else the font-weight, font-style, or font-varient then these values will automatically default to a value of normal.
  4. 4. Two classes together <p class=&quot;text pad&quot;>...</p> Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and pad. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.
  5. 5. CSS Sprites BELOW #nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')} AFTER #nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}
  6. 6. CSS Sprites - Buttons HTML <div class=&quot;clearbutton&quot;> <a class=&quot;GlobalOrangeButton&quot; href=&quot;#&quot;><span>So Neat!</span></a> </div> CSS a.GlobalOrangeButton span { background: transparent url('images/button_left_orange.png') no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff; } a.GlobalOrangeButton { background: transparent url('images/button_right_orange.png') no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; } a.GlobalOrangeButton:hover span { background-position: 0 -34px; color: #fff; } a.GlobalOrangeButton:hover { background-position: right -34px; }
  7. 7. !important ignored by IE Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be: margin-top: 3.5em !important; margin-top: 2em So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.
  8. 8. Google Web Fonts <ul><li>The Google Font API helps you add web fonts to any web page. </li></ul><ul><li>Benefits of the Google Font API include: </li></ul><ul><li>A choice of high quality open source fonts. </li></ul><ul><li>Works in most browsers. </li></ul><ul><li>Extremely easy to use. </li></ul><ul><li>For example, the following text uses a web font called Tangerine: </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://fonts.googleapis.com/css?family=Tangerine&quot;> </li></ul><ul><li><style> </li></ul><ul><li>body { </li></ul><ul><li>font-family: 'Tangerine', serif; </li></ul><ul><li>font-size: 48px; </li></ul><ul><li> text-shadow: 4px 4px 4px #aaa;} </style> </li></ul>Making the Web Beautiful!
  9. 9. Text Wrapping .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } A long cold winter delayed the blossoming of the millions of cherry...
  10. 10. .transparent_class { /* IE 8 */ -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&quot;; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; } Cross Browser Opacity
  11. 11. Intro to HTML 5
  12. 12. Benefits of HTML 5 <ul><li>Less Header codes </li></ul><ul><li>More semantic HTML tags </li></ul><ul><li>Media Tags </li></ul><ul><li>Geolocation </li></ul><ul><li>Canvas </li></ul><ul><li>Input Types </li></ul><ul><li>Form validation </li></ul><ul><li>Draggable </li></ul><ul><li>Local Storage </li></ul><ul><li>Cross Domain Messaging </li></ul>
  13. 13. Intro to HTML 5 The new structural elements <header> <nav> <section> <article> <aside> <footer>
  14. 14. Lets check this
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×