Design, CG Graphics & Inspiration
HTML & CSS Aspects

HTML & CSS Aspects

In this material I’ve collected the main useful aspects which html developer should know and remember about. Part of the questions considered here is devoted to IE – I gave up of IE6 support myself, however it would not come amiss to know the features of his behavior.

1. Browser modes

Standard:
Standards mode are tables of styles, being in a document, correspond to the CSS 2.1 specifications (last versions)

Non-standard mode (mode of reverse compatibility):
Quirks mode it’s when a browser ignores part of CSS rules, imitating behavior of old rendering-engine.

Mode which is close to standard:
Almost standards mode – Opera, Firefox, Safari, in which the location of pictures in the table cells is represented in the mode of compatibility.

2. Selectors, pseudo-classes, pseudo-elements

1) Selectors:

Tag selector – any HTML tag can play the role of selector, which already has a set formatting rules.

tagName {

 property1: value1;

 property2: value2;

 …

}

tag name – a register doesn’t matter

Class selector – there can be any amount of selectors in a document.

.className {

 …

}

ID Selector – an identifier which determines the unique name of an element.

#idName {

 …

}

idName – a register is taken into account

Context selectors – consists of tags’ selectors, classes’ selectors, id selectors etc, divided by blanks.

sel1 sel2 … {

 …

}

Adjacent selectors are elements of document, when they follow after each other in code. In the syntax of CSS the values are implemented to the properties of element following after +

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
b, var – соседние
sel1 + sel2 {

 …

}

Child selectors – are situated directly in a parental element. In the syntax of CSS style values are implemented only to a child element.

<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing 
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> 
em – child element p
sel1 > sel2 {

 …

}

sel1 – parental selector
sel2 – child selector

Attribute selector:

[attribute] {

 …

}

Universal selector – determines the style for all elements of a document.

* {

 …

}

2) Pseudoclasses:

sel:pClass {
…
}

• : link is the unvisited link (it is possible not to specify )
• : visited is the visited link
• : hover is a hovering on a link
• : active is a click on a link
• : focus is giving a focus to the element ( a, input, select, textarea )
• : first – child – is used to the first child element of a selector
• :lang(lang)

3) Pseudoelements:

Pseudoelements allow you to set style of elements which are not determined in the tree of elements, and also to generate content which is not present in the source code of the document’s text.

• : first – line is a style of the first line
• : first – letter is a style of the first symbol
• : after { content: “”.; } – is used for the insertion of the appointed content after an element
• : before { content: “”.; } – is used for the insertion of the appointed content before the element

Cascading and specificity

1. The rules of cascading determine next priorities:
2. User styles marked with a small flag !important
3. Author’s styles marked with a small flag !important
4. Author’s styles
5. User styles
6. Browser styles by default

Specificity:

For a calculation to every type of selectors a numerical value is being assigned. Specificity is calculated by adding up of value of every selector. A calculation takes place in the system with the indefinitely high founding.

abcd

1. if style is built-in, then a = 1
2. b equals to the general amount of identifiers’ selectors
3. c equals to the general amount of classes, pseudoclasses and selectors of attributes
4. d equals to the amount of selectors of types and pseudoelements

hasLayout

hasLayout is IE property, which determines how an element is situated in a stream, his sizes, positioning, reaction on events and influence on other elements. Mainly, elements in Internet Explorer are not responsible for their own organization. Tag can have position, in a source code and stream of document, but its content is put in order by the nearest parent with layout (usually). Such elements depend upon a parent, because it does all heavy part on determining size and units.

Elements which have hasLayout by default:
• html, body
• table, tr, th, td
• img
• hr
• input, button, select, textarea, fieldset, legend
• iframe, embed, object, applet
• marquee
The next values of the enumerated properties give “layout” to the element (hasLayout = true):
• position: absolute
• float: left or right
• height, width: any value except auto
• display: inline-block
• zoom: any value except normal (non-valid property)
• writing-mode: tb-rl
• overflow, overflow-x, overflow-y: auto|scroll|hidden (in IE7 only)
• position: fixed (in IE7 only)
• min-width, min-height: any value (in IE7 only)
• max-width, max-height: any value except none (in IE7 only)

To throw down hasLayout, you should specify a value different from listed above (for example: width: auto or float: none).

Possible problems:
• floating elements automatically cleared up by the elements which has hasLayout
• relatively positioned elements do not get hasLayout
• external bands (margin) of contiguous elements, having hasLayout, don’t blend
• the click area of sectional hyperlink without hasLayout is limited with the text area

Bugs of IE and their decisions

1) Conditional comments:

<!--[if IE 6]>content for IE 6<![endif]-->
<!--[if gt IE 7]>content for greater than IE 7<![endif]-->
<!--[if gte IE 8]>content for greater or equal than IE 8<![endif]-->
<!--[if lt IE 6]>content for later than IE 6<![endif]-->
<!--[if lte IE 7]>content for later or equal than IE 7<![endif]-->

2) Error with double margin of the floating elements:
Problem: in IE 6 at floating elements double margin is being created.
Decision: to add display: inline.

3) The absolute positioning in the container positioned relatively:
Problem: the absolutely positioned elements are in a container which is positioned relatively. As a result, a paternal container has no hasLayout and absolutely positioned containers take place relatively to the specific screen.
Decision: to set hasLayout to the paternal container. Example: height: 1%.

4) The absolutely positioned containers inside the absolutely/relatively positioned:
Problem: in IE the absolutely positioned containers inside the relatively positioned at imposition line up not in accordance with z – index.
Decision: to add z – index to the paternal absolutely/relatively positioned elements.

  • Roman,
  • October 17, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • The latest version of html 5 and CSS 3 are creating dynamic and eye catching effects..  Awesome post..

  • The HTML5 specification was
    adopted as the starting point of the work of the new HTML working group
    of the W3C in 2007. This working group published the First Public
    Working Draft of the specification on 22 January 2008Prior
    to CSS, nearly all of the presentational attributes of HTML documents
    were contained within the HTML markup; all font colors, background
    styles, element alignments, borders and sizes had to be explicitly
    described, often repeatedly, within the HTML. CSS allows authors to move
    much of that information to another file, the style sheet, resulting in
    considerably simpler HTML.
     

  • The latest version of html 5 and CSS 3 are creating dynamic and eye catching effects..  Awesome post..

  • The HTML5 specification was
    adopted as the starting point of the work of the new HTML working group
    of the W3C in 2007. This working group published the First Public
    Working Draft of the specification on 22 January 2008Prior
    to CSS, nearly all of the presentational attributes of HTML documents
    were contained within the HTML markup; all font colors, background
    styles, element alignments, borders and sizes had to be explicitly
    described, often repeatedly, within the HTML. CSS allows authors to move
    much of that information to another file, the style sheet, resulting in
    considerably simpler HTML.