Use Correct Document Type
Use Lower Case Element Names
Close All HTML Elements
Close Empty HTML Elements
Use Lower Case Attribute Names
Quote Attribute Values
No Spaces around Equal Signs
Avoid Long Code Lines
Blank Lines and Indentation
No Omitting <html> and <body>
The <title> element is required in HTML5. Make the title as meaningful as possible.
Use simple syntax for linking style sheets (type attribute is not necessary)
Use Lower Case File Names
Image Attributes (Always use the alt attribute with images. Always define image size.)
Sunday, November 1, 2015
Friday, October 30, 2015
Margin and padding
All inline elements except images lack margins, and will not take margin values.
Given a large enough negative margin applied to a large enough block element, the affected adjacent element can even be overlapped.
Collapsing margins
In cases where two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied. Only margins between two adjacent block elements of the same subtype will collapse.
Lists and headings are peculiar among block elements, so their margins will not be collapsed into the margins of the other block elements.
Padding properties behave in exactly the same manner as margin properties, with the following exceptions:
width and height cannot be applied to inline elements except for images, which can be assigned width and height even though they are inline elements.
Inline elements can only contain text or other inline elements.
margin, width, height, and float properties in style sheet rules applicable to these elements (except img and object) are ignored.
Inline elements are: a, em, strong, input, img, span, label, abbr, address, cite
Given a large enough negative margin applied to a large enough block element, the affected adjacent element can even be overlapped.
Collapsing margins
In cases where two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied. Only margins between two adjacent block elements of the same subtype will collapse.
Lists and headings are peculiar among block elements, so their margins will not be collapsed into the margins of the other block elements.
Padding properties behave in exactly the same manner as margin properties, with the following exceptions:
- auto values are functionally useless in references to padding properties.
- Negative padding values are invalid.
- Padding is never collapsed.
- Margin values are not applied to inline elements, but padding values are.
width and height cannot be applied to inline elements except for images, which can be assigned width and height even though they are inline elements.
Inline elements can only contain text or other inline elements.
margin, width, height, and float properties in style sheet rules applicable to these elements (except img and object) are ignored.
Inline elements are: a, em, strong, input, img, span, label, abbr, address, cite
Friday, October 16, 2015
browser navigator language
The navigator object provides information about the browser, as there is no public standard applies to this object, there is quite different implementations for navigator in all major browsers, and so it is the same about browser language exposed in this object.
navigator.language
returns the language of the browser, but it is not user preference language through browser settings. Different browser has different implementation as of writing, like Chrome always returns browser language, while Firefox returns the first preference language.
navigator.languages
This is new and well supported in Chrome and Firefox, which returns all browser preference languages. The value is an array.
For example, one return value is
Array [ "zh", "pt-BR", "es-AR", "fr", "zh-TW", "en", "pt", "ja", "en-US" ]
which maps to Http header Accept-Language
zh,pt-BR;q=0.9,es-AR;q=0.8,fr;q=0.7,zh-TW;q=0.6,en;q=0.4,pt;q=0.3,ja;q=0.2,en-US;q=0.1
This new property added to navigator object gives javascript developer more power to do i18n for web application. We can quickly know user's preference language for this browser, then show translated version based on the first value appears in languages array.
Internet Explorer has the following three language related properties.
navigator.userLanguageRetrieves the operating system's natural language setting.
navigator.systemLanguage
Retrieves the default language used by the operating system.
navigator.browserLanguage
Retrieves the current operating system language.
Note that IE10 or early versions don't provide a navigator.language property like other major browsers. Check MSDN online document for details.
https://msdn.microsoft.com/en-us/library/ms535867(v=vs.85).aspx
navigator.language
returns the language of the browser, but it is not user preference language through browser settings. Different browser has different implementation as of writing, like Chrome always returns browser language, while Firefox returns the first preference language.
navigator.languages
This is new and well supported in Chrome and Firefox, which returns all browser preference languages. The value is an array.
For example, one return value is
Array [ "zh", "pt-BR", "es-AR", "fr", "zh-TW", "en", "pt", "ja", "en-US" ]
which maps to Http header Accept-Language
zh,pt-BR;q=0.9,es-AR;q=0.8,fr;q=0.7,zh-TW;q=0.6,en;q=0.4,pt;q=0.3,ja;q=0.2,en-US;q=0.1
This new property added to navigator object gives javascript developer more power to do i18n for web application. We can quickly know user's preference language for this browser, then show translated version based on the first value appears in languages array.
Internet Explorer has the following three language related properties.
navigator.userLanguageRetrieves the operating system's natural language setting.
navigator.systemLanguage
Retrieves the default language used by the operating system.
navigator.browserLanguage
Retrieves the current operating system language.
Note that IE10 or early versions don't provide a navigator.language property like other major browsers. Check MSDN online document for details.
https://msdn.microsoft.com/en-us/library/ms535867(v=vs.85).aspx
Subscribe to:
Posts (Atom)