how do speed up web pages? css & html tricks

15
How do speed up web pages? CSS & HTML tricks - Swati Arora

Upload: compare-infobase-limited

Post on 27-Jan-2015

120 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: How do speed up web pages? CSS & HTML Tricks

How do speed up web pages?

CSS & HTML tricks- Swati Arora

Page 2: How do speed up web pages? CSS & HTML Tricks

Some EASY tricks

• CSS font shorthand rule

• Two classes together

• CSS Sprites

• !important ignored by IE

• Image replacement technique

• Google web fonts

• Text Wrapping

• Cross browser Opacity

Page 3: How do speed up web pages? CSS & HTML Tricks

CSS font shorthand ruleWhen 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.

Page 4: How do speed up web pages? CSS & HTML Tricks

Two classes together

<p class="text pad">...</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.

Page 5: How do speed up web pages? CSS & HTML Tricks

CSS SpritesBELOW#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;}

Page 6: How do speed up web pages? CSS & HTML Tricks

CSS Sprites - ButtonsHTML<div class="clearbutton"> <a class="GlobalOrangeButton" href="#"><span>So Neat!</span></a>

</div>

CSSa.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; }

Page 7: How do speed up web pages? CSS & HTML Tricks

!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.

Page 8: How do speed up web pages? CSS & HTML Tricks

Google Web FontsThe Google Font API helps you add web fonts to any web page.

Benefits of the Google Font API include:

• A choice of high quality open source fonts.

• Works in most browsers.

• Extremely easy to use.

For example, the following text uses a web font called Tangerine:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<style> body { font-family: 'Tangerine', serif; font-size: 48px;

text-shadow: 4px 4px 4px #aaa;} </style>

Making the Web

Beautiful!

Page 9: How do speed up web pages? CSS & HTML Tricks

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...

Page 10: How do speed up web pages? CSS & HTML Tricks

.transparent_class { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* 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

Page 11: How do speed up web pages? CSS & HTML Tricks

Intro to HTML 5

Page 12: How do speed up web pages? CSS & HTML Tricks

Benefits of HTML 5

• Less Header codes

• More semantic HTML tags

• Media Tags

• Geolocation

• Canvas

• Input Types

• Form validation

• Draggable

• Local Storage

• Cross Domain Messaging

Page 13: How do speed up web pages? CSS & HTML Tricks

Intro to HTML 5

The new structural elements

<header>

<nav>

<section>

<article>

<aside>

<footer>

Page 14: How do speed up web pages? CSS & HTML Tricks

Lets check this

Page 15: How do speed up web pages? CSS & HTML Tricks