CSS & JQuery training

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…) 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 ulli {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 • body > div > div blockquote{ margin-left: 30px; } • .post h1 ~ p { font-size: 13px; } • div#sidebar > h2 { font-size: 20px; } • a[hreflang|="en"] • ulli: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. • Netscape can be put under Web 1.0, while Google under Web 2.0

Refrences • http://www.w3.org/TR/CSS2/selector.html • http://www.smashingmagazine.com/2009/08/17/taming-advanced-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-is-web-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 Negative<![IGNORE[]]> HTML  • !importantp { 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();

CSS & JQuery training