Welcome to Scribd. Sign in or start your free trial to enjoy unlimited e-books, audiobooks & documents.Find out more
Download
Standard view
Full view
of .
Look up keyword
Like this
9Activity
0 of .
Results for:
No results containing your search query
P. 1
Cross Browser Web Design

Cross Browser Web Design

Ratings:

4.0

(1)
|Views: 105|Likes:
Published by Henry
Some tips and tricks to help design cross browser compatible web design
Some tips and tricks to help design cross browser compatible web design

More info:

Categories:Types, Maps
Published by: Henry on Mar 23, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF or read online from Scribd
See more
See less

05/26/2014

pdf

 
Explain which div youre closing
Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almostendless list of closing
</div> 
tags. In fact, many beginners think they just have to use divs instead oftables to produce quality code. Divs are cleaners than tables, but without proper code organization, itcan be as (or even sometimes more) messy as table based code.Using indentation is a good start. But a tip that can definitely make you save lot of time is to commentevery div tag you’re closing, as shown in the example below:
Use a CSS reset
Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you mightalready know how useful a CSS reset it. Because by default, browsers don’t apply the same defaultstyling to HTML elements, a CSS reset will ensure that all element have no particular style so youcan define your own without the risk of many cross-browser rendering issues.
1.2.3.4.5.<
div
 id="header"> <
div
 id="sub" class="first left"> ...</
div
><!-- #sub.first.left --></
div
><!-- #header -->01.02.03.04.05.06.07.08.09.10.11.12.13.14.15.16.17.18.html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote,pre, a, abbr, acronym, address, big, cite,code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong,sub, sup, tt, var, b, u, i,center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table,caption, tbody, tfoot, thead, tr, th, td {
margin
:0;
padding
:0;
border
:0;
outline
:0;
font-size
:100%;
vertical-align
:baseline;
background
:transparent;}body {
Top 10 Best Practices For Front-End Web Developers
By Jean-Baptiste Jung 
 
Don’t use @import
CSS files can be included using the @import directive. This can be useful when, for example, youwant to include a stylesheet into another. Another common practice is to include CSS file in htmldocuments using the following:While it works, the
@import 
directive is much slower than the other way to include stylesheets into ahtml document:It will not make a difference on low traffic websites, but if you have the chance to own a popularwebsite, don’t waste your visitor’s time using
@import 
.
“Smush” your images
19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.44.45.46.47.48.49.50.
line-height
:1;}ol, ul {
list-style
:none;}blockquote, q {
quotes
:none;}blockquote:before, blockquote:after,q:before, q:after {
content
:'';
content
:none;} /* remember to define focus styles! */:focus {
outline
:0;} /* remember to highlight inserts somehow! */ins {
text-decoration
:none;}del {
text-decoration
:line-through;} /* tables still need 'cellspacing="0"' in the markup */table {
border-collapse
:collapse;
border-spacing
:0;}1.2.3.4.<
style
type="text/css>@import url('a.css');@import url('b.css');</
style
>1.2.<
link
 rel='stylesheet' type='text/css' href='a.css'> <
link
 rel='stylesheet' type='text/css' href='proxy.css'>
 
Being a developer, I always found that optimizing my images for the web wasn’t easy. I tried thegood old “Save for web” Photoshop command, but most of the time, I ended up with images thatwere either too big or without a sufficient quality.As a result, I had the bad habit of using unoptimized images on my websites. This isn’t a problemwhen you don’t have to care about your site’s bandwidth, but after my recent switch on myvps.netvirtual private server, I had to be careful with image sizes.At this time, I found a very cool tool namedSmush It: You enter your unoptimized image url, andSmush It will create a perfectly optimized image for you. You can save up to 70% of the file size,while keeping the original quality. As an example, all the images from mylist of online code editorshave been “smushed”.
Don’t mix CSS with HTML
As a markup language, the right use of HTML is to organize documents by defining a header, afooter, lists, blockquotes, etc. Some time ago, front-end web developers often used now deprecatedHTML attributes to style a particular element.Nowadays, the
style 
attribute allows developers to insert CSS directly into a html document. This isvery useful for testing or when you’re in a hurry. But the
style 
attribute is bad practice, that goescompletely against the CSS philosophy.The following example illustrates how dirty and hard to read a simple line of code can become, withthe
style 
attribute:
Don’t mix Javascript with HTML
Just like mixing your html code with css is bad practice, you shouldn’t use any Javascript in your htmldocuments. The following bad practice illustrates an
onclick 
event:The same result can be achieved using unobstructed Javascript. In this example, I’m using thepopular jQuery framework:This may seems a bit harder at first, especially for beginners; but it is definitely not, and it will keepyour html document clean.
1.<
a
 href="http://www.catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</
a
>1.<
a
 id="cwc" href="http://www.catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</
a
>1.2.3.4.5.$(document).ready(
function
() {$('#cwc').click(
function
() {alert('I love this website');});});

Activity (9)

You've already reviewed this. Edit your review.
dhub liked this
1 hundred reads
brayan1707 liked this
shreyas_kadam liked this
yovmed2263 liked this
Martin Levinga liked this
arnelsoft liked this
rajaragula7683 liked this

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->