CSS & JQuery training - Tarun Gupta Agenda Web page architecture Understanding reasons behind cross-browser issues CSS crash course Comparison between tables, div, span, etc.
Download ReportTranscript CSS & JQuery training - Tarun Gupta Agenda Web page architecture Understanding reasons behind cross-browser issues CSS crash course Comparison between tables, div, span, etc.
CSS & JQuery training
- Tarun Gupta
Agenda
Web page architecture
Understanding reasons behind cross-browser issues
CSS crash course
Comparison between tables, div, span, etc. and when to use
what
Advanced CSS
Web 2.0 concept
HTML5 features
CSS Browser Hacks
Performance
JQuery basics & architecture
Advanced JQuery
Web Page Technologies
Web standard trios: HTML, JS & CSS
Flash
Box Model
<body>
<div>content goes in here</div>
</body>
div {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 10px; }
Box Model (cont…)
Box Model (cont…)
Box Model (cont…)
Boxes are of one of two types, block and inline, each with
its own rules about where it lays and where elements
that come after it lay.
When a box is set via display: none the space that
box occupied collapses.
When a box is set via visibility: hidden the box is
not seen, but it still holds its space.e that box occupied
collapses.
Floats and positioned elements: take boxes out of
the normal document flow and affect where they sit
and where the elements around them also sit.
Browser Operation Modes
Quirks Mode: is a mode of operation of web browsers
such as Internet Explorer (IE), Firefox, and Opera. Basically,
Quirks Mode (also called Compatibility Mode) means that a
relatively modern browser intentionally simulates many bugs
in older browsers, especially IE 4 and IE 5.
Standard (Strict) Mode: W3C standard mode
Compatibility Mode: Present only in IE8
Compatibility- Quirks: Browser tries to emulate IE 7 in
some issues.
Compatibility-Standard: Broser tries to emulate IE 5 in
some issues.
Document Type (DOCTYPE)
The "DOCTYPE" begins the HTML document and tells a validator which version of
HTML to use in checking the document's syntax.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
DIV vs Tables
Tables should be used only for structured data.
DIVs should be used for layouts.
Overall page size when using DIVs is less than
corresponding design using tables in almost all
practical scenarios
Performance of DIV bases websites is better as
compared to Tables
Span vs Div
The main difference is that a <span> tag is
an inline element and <div> tag is
a block element.
Use <span> when you want to change the style of
elements without placing them in a new block-level
element in the document.
CSS Positioning
absolute: Generates an absolutely positioned element, positioned relative to the first
parent element that has a position other than static. The element's position is
specified with the "left", "top", "right", and "bottom" properties.
fixed: Generates an absolutely positioned element, positioned relative to the browser
window. The element's position is specified with the "left", "top", "right", and "bottom"
properties.
relative: Generates a relatively positioned element, positioned relative to its normal
position, so "left:20" adds 20 pixels to the element's LEFT position.
static: Default. No position, the element occurs in the normal flow (ignores any top,
bottom, left, right, or z-index declarations).
inherit: Specifies that the value of the position property should be inherited from the
parent element.
http://www.w3schools.com/Css/tryit.asp?filename=trycss_position_relative
CSS z-index
The z-index property specifies the stack order of an
element.
An element with greater stack order is always in front of
an element with a lower stack order.
z-index only works on positioned elements
(position:absolute, position:relative, or position:fixed).
http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex
CSS Selectors
In CSS, pattern matching rules determine which style
rules apply to elements in the document tree.
These patterns, called selectors, may range from
simple element names to rich contextual patterns. If
all conditions in the pattern are true for a certain
element, the selector matches the element.
CSS – Attribute Selectors
Attribute selectors let you target an element based on its attributes. (6 types)
[att=value]
The attribute has to have the exact value specified.
[att~=value]
The attribute’s value needs to be a whitespace separated list of words (for
example, class=”title featured home”), and one of the words is exactly the
specified value.
[att|=value]
The attribute’s value is exactly “value” or starts with the word “value” and is
immediately followed by “-”, so it would be “value-”.
[att^=value]
The attribute’s value starts with the specified value.
[att$=value]
The attribute’s value ends with the specified value.
[att*=value]
The attribute’s value contains the specified value.
CSS – Attribute Selectors
Examples:
div[class*="post"]
{
background-color: #333;
}
This will match all the div elements whose class attribute contains the words “posts”, in any
position.
input[type="text"]
{
width: 200px;
}
This will target all the input elements whose type attribute is exactly “text”.
What does following code do?
a[href$=".jpg"]
{
background: url(jpeg.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}
a[href$=".pdf"] { background: url(pdf.gif) no-repeat left 50%;
padding: 2px 0 2px
20px;
}
a[href$=".doc"] { background: url(word.gif) no-repeat left 50%;
padding: 2px 0 2px
20px;
}
CSS – Descendent Selectors
Descendant selectors allow you to select any element that's a descendant of
another.
Example
ul li
{border: 1px solid black;}
This will put a border around both of the <li> elements in this markup:
<ul>
<li>This is a list item
<ol>
<li>This is another list item</li>
</ol>
</li>
</ul>
CSS – Child Selectors
Child selectors are just restricted descendant selectors, so that the second element
must be a child of the first.
Example
ul > li
{border: 1px solid black;}
This will put a border around first <li> elements in this markup:
<ul>
<li>This is a list item
<ol>
<li>This is another list item</li>
</ol>
</li>
</ul>
CSS – Sibling Selectors
There are two types of sibling combinators: adjancent sibling combinators and
general sibling combinators.
Adjacent sibling combinator:
This selector uses the plus sign, “+”, to combine two sequences of simple selectors.
The elements in the selector have the same parent, and the second one must
come immediately after the first.
Example:
p + h2 { margin-top: 10px;
}
General sibling combinator:
The selector uses the tilde sign ‘~’. It works pretty much the same as the adjacent
sibling combinator, but with the difference that the second selector doesn’t
have to immediately follow the first one.
Example:
.post h1 ~ p {
font-size: 13px; }
CSS – Pseudo-classes
Dynamic pseudo-classes
These are called dynamic pseudo-classes because they actually do not exist within
the HTML: they are only present when the user is or has interacted with the
website.
There are two types of dynamic pseudo-classes: link and user action ones. The link
are :link and:visited, while the user action ones are :hover, :active and :focus.
:first-child
The :first-child pseudo-class allows you to target an element that is the first child of
another element. For example, if you want to add a top margin to the
first li element of your unordered lists, you can have this:
ul > li:first-child
{
margin-top: 10px;
}
CSS – Pseudo-classes (cont…)
language
The language pseudo-class, :lang(), allows you to match an element based on its
language.
For example, lets say you want a specific link on your site to have a different
background color, depending on that page’s language:
:lang(en) > a#flag
{
background-image: url(english.gif);
}
:lang(fr) > a#flag
{
background-image: url(french.gif);
}
CSS 3 Pseudo classes
:nth-child
The :nth-child() pseudo-class allows you to target one or more specific children
of a parent element.
Example:
ul li:nth-child(3) {
color: red;}
Turns the text on the third li item within the ul element red. Note: If a different
element is inside the ul (not a li), it will also be counted as its child.
ul li:nth-child(3n+4) {
color: yellow;
}
Matches every third li element starting from the fourth
ul li:nth-child(-n+4) { color: green;
}
Targets only the first four li elements within the list
CSS Selectors - Excercise
1.
body > div > div blockquote
{ margin-left: 30px; }
2.
.post h1 ~ p
{ font-size: 13px;
}
div#sidebar > h2
{ font-size: 20px;
}
3.
4.
a[hreflang|="en"]
5.
ul li:nth-child(2n+1)
{ color: yellow;
}
CSS Selectors – Exercise (cont…)
Web 2.0
Web 2.0 is a concept and not a technology.
Some treat it as a meaningless marketing
buzzword.
Others accept it as the new conventional wisdom.
Netscape can be put under Web 1.0, while Google
under Web 2.0
Web 2.0 (cont…)
Netscape focused on creating software, updating it
on occasion, and distributing it to the end users.
Google did not at the time focus on producing
software, such as a browser, but instead focused
on providing a service based on data such as the
links Web page authors make between sites.
Google exploits this user-generated content to offer
Web search based on reputation through its "page
rank“ algorithm.
Others accept it as the new conventional wisdom.
Refrences
http://www.w3.org/TR/CSS2/selector.html
http://www.smashingmagazine.com/2009/08/17/tamingadvanced-css-selectors/
http://kimblim.dk/css-tests/selectors/
http://www.w3schools.com/css/css_examples.asp
http://www.oreillynet.com/oreilly/tim/news/2005/09/30/what-isweb-20.html
http://gwthtml5.appspot.com/
CSS Browser Hacks
Sometimes there is no reasonable way to accomplish a desired layout in all major web
browsers without the use of some special exception rules for certain layout engines.
Hacks necessarily lead to potential complications and should be avoided whenever
possible, but when the circumstances require hacks to be used, it's best to know what
your options are and weigh the consequences appropriately.
Most in-CSS hacks deal with selector bugs.
Conditional Comments:
Positive<!--[if condition]> HTML <![endif]-->
Negative<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css">
<![endif]-->
}
!important
p{
background: green !important; /* Major browsers other than IE 6 and below
respect the importance immediately */
background: red; /* IE 6 and below use this value instead, even though the above
was marked as important */
jQuery
Tag line: The Write Less, Do More, JavaScript Library
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
jQuery – Conflicts
Many JavaScript libraries use $ as a function or variable name, just as
jQuery does. In jQuery's case, $ is just an alias for jQuery, so all
functionality is available without using $. If we need to use another
JavaScript library alongside jQuery, we can return control of $ back to
the other library with a call to $.noConflict():
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> $.noConflict();
// Code that uses other library's $ can follow here. </script>
jQuery VS CSS VS DOM
CSS:
#container a { ... }
DOM:
document.getElementById('container').getElementsByTagName('a');
jQuery:
$('#container a');
jQuery – Document Ready
An alternative to body onload.
$(document).ready(function() {
// do stuff when DOM is ready
});
jQuery – Load a page in DIV
Just like we load pages in frames or iframes, we can load
other pages in div elements.
$(div).load();