Jumat, 29 Juni 2018

Sponsored Links

Web style guide - Web Publishing - ANU
src: webpublishing.anu.edu.au

The Web style sheet is a form of presentation and content separation for web design where markup (ie, HTML or XHTML) of a page contains the content and structure of page semantics, but does not specify a visual layout. Instead, styles are defined in an external style sheet file using a style sheet language such as CSS or XSLT. This design approach is identified as "separation" because it largely replaces the antecedent methodology in which page markup defines style and structure.

The philosophy underlying this methodology is a special case of separation of concerns.


Video Style sheet (web development)



Benefits

The separation of styles and content has its advantages, but only becomes practical after an increase in the implementation of popular web browser CSS.

Speed ​​

Overall, the experience of site users who use style sheets will generally be faster than sites that do not use technology. 'Overall' because the first page might load slower - because style sheets and content need to be transferred. The next page will load faster because there is no style information that needs to be downloaded - the CSS file already exists in the browser cache.

Maintainability

Holding all presentation styles in one file can reduce maintenance time and reduce the chance of errors, thereby increasing the consistency of the presentation. For example, the font color associated with the type of text element can be determined - and therefore easy to modify - across the entire website by simply changing one short string of characters in a single file. An alternative approach, using styles embedded on every page, will require complex, time-consuming, and error-prone edits on each file.

Accessibility

Sites that use CSS with XHTML or HTML are easier to change to look similar in different browsers (Internet Explorer, Mozilla Firefox, Opera, Safari, etc.).

Sites that use CSS are "gracefully degraded" in browsers that can not display graphical content, such as Lynx, or very very old ones so they can not use CSS. Browsers ignore CSS they do not understand, such as CSS 3 statements. This enables various user agents to access site content even if they can not create style sheets or are not designed with graphic capabilities in mind. For example, browsers using braille displays that can be refreshed for output can ignore layout information entirely, and users will still have access to all page content.

Customization

If the page layout information is stored externally, the user may decide to disable the layout information completely, leaving the site content blank in an easy to read format. Site authors can also offer multiple style sheets, which can be used to change the look of a site without changing its contents.

Most modern web browsers also allow users to specify their own style sheets, which can include rules that override the author's layout rules. This allows users, for example, to thicken each hyperlink on every page they visit.

Consistency

Since semantic files only contain the meaning that the author wishes to convey, the style of the various content elements of the document is very consistent. For example, titles, emphasized text, lists and mathematical expressions all accept consistently applied style properties of an external style sheet. The author does not need to concern himself with the style property at the time of composition. Details of this presentation can be delayed until the presentation.

Portability

Delaying presentation details until presentation time means that documents can be easily redesigned for an entirely different presentation medium with only the application of new style sheets already prepared for new media and consistent with the element or structure vocabulary of the semantic document. A carefully written document for a web page can be easily printed to a hard-bound volume complete with headers and footers, page numbers and table of contents generated simply by applying a new style sheet.

Maps Style sheet (web development)



Today's practical disadvantage

Currently the specifications (eg, XHTML, XSL, CSS) and software implementing these specifications only reach the initial stage of maturity. So there are some practical problems facing writers who are trying to embrace this method of separating content and style.

Narrow adoption without parsing tools and creation

While the style specification is mature enough and still matures, software tools have been slow to adapt. Most major web development tools still use mixed presentation content models. So writers and designers looking for a GUI-based tool for their work find it hard to follow semantic web methods. In addition to GUI tools, shared storage for common style sheets might help the adoption of this method.

CSS3 Animation Cheat Sheet | Web Design and Development ...
src: s-media-cache-ak0.pinimg.com


See also

  • Separation of worries

Front-end Web Development: CSS floats & flexbox - YouTube
src: i.ytimg.com


References


CSS3 Animation Cheat Sheet | UI Design | Pinterest | Animation and ...
src: i.pinimg.com


External links

  • CSS Zen Garden: A site that challenges designers to create a new page layout without touching the XHTML source. Includes dozens of layouts. CSS sources can be viewed for each layout.

Source of the article : Wikipedia

Comments
0 Comments