﻿{"id":431,"date":"2009-03-07T07:35:00","date_gmt":"2009-03-07T07:35:00","guid":{"rendered":"https:\/\/chayilyam.com\/stories\/?p=431"},"modified":"2009-03-07T07:35:00","modified_gmt":"2009-03-07T07:35:00","slug":"css-design-principles","status":"publish","type":"post","link":"https:\/\/chayilyam.com\/stories\/css-design-principles\/","title":{"rendered":"CSS Design Principles"},"content":{"rendered":"<div style=\"margin:0; padding:0;\"><\/p>\n<h2 style=\"color:5a5a5a;\">CSS design principles<\/h2>\n<p><\/p>\n<p style=\"color:#666; font-size:14px; font-weight:bold; letter-spacing:1px;\">CSS3 as CSS2 and CSS1 before it, is based on a set of design principles:<\/p>\n<p><\/p>\n<ul style=\"list-style:none; padding:0px 5px; border:1px double #5d5d5d;\">  <\/p>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Forward and backward compatibility<\/strong>. CSS2 user agents will be   able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2   style sheets and discard parts they don&#8217;t understand. Also, user agents with no   CSS support will be able to display style-enhanced documents. Of course, the   stylistic enhancements made possible by CSS will not be rendered, but all   content will be presented.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Complementary to structured documents<\/strong>. Style sheets   complement structured documents (e.g., HTML and XML applications), providing   stylistic information for the marked-up text. It should be easy to change the   style sheet with little or no impact on the markup.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Vendor, platform, and device independence<\/strong>. Style sheets   enable documents to remain vendor, platform, and device independent. Style   sheets themselves are also vendor and platform independent, but CSS2 allows you   to target a style sheet for a group of devices (e.g., printers).<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Maintainability<\/strong>. By pointing to style sheets from documents,   webmasters can simplify site maintenance and retain consistent look and feel   throughout the site. For example, if the organization&#8217;s background color   changes, only one file needs to be changed.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Simplicity<\/strong>. CSS2 is more complex than CSS1, but it remains a   simple style language which is human readable and writable. The CSS properties   are kept independent of each other to the largest extent possible and there is   generally only one way to achieve a certain effect.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Network performance<\/strong>. CSS provides for compact encodings of   how to present content. Compared to images or audio files, which are often used   by authors to achieve certain rendering effects, style sheets most often   decrease the content size. Also, fewer network connections have to be opened   which further increases network performance.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Flexibility<\/strong>. CSS can be applied to content in several ways.   The key feature is the ability to cascade style information specified in the   default (user agent) style sheet, user style sheets, linked style sheets, the   document head, and in attributes for the elements forming the document body.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Richness<\/strong>. Providing authors with a rich set of rendering   effects increases the richness of the Web as a medium of expression. Designers   have been longing for functionality commonly found in desktop publishing and   slide-show applications. Some of the requested rendering effects conflict with   device independence, but CSS2 goes a long way toward granting designers their   requests.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Alternative language bindings<\/strong>. The set of CSS properties   described in this specification form a consistent formatting model for visual   and aural presentations. This formatting model can be accessed through the CSS   language, but bindings to other languages are also possible. For example, a   JavaScript program may dynamically change the value of a certain element&#8217;s &#8216;color&#8217; property.<\/p>\n<p>  <\/li>\n<li style=\"padding:0px; margin:0px;\"> \n<p style=\"color:#666; font-size:14px; letter-spacing:1px;\"><strong style=\"color:#aa0000; font-size:16px; font-weight:bold; letter-spacing:1px;\">Accessibility<\/strong>. Several CSS features will make the Web more   accessible to users with disabilities:<\/p>\n<p>    <\/p>\n<ul style=\"color:#0033CC\">\n<li style=\"padding:0px; margin:0px;\">Properties to control font appearance allow authors to eliminate   inaccessible bit-mapped text images. <\/li>\n<li style=\"padding:0px; margin:0px;\">Positioning properties allow authors to eliminate mark-up tricks (e.g.,   invisible images) to force layout. <\/li>\n<li style=\"padding:0px; margin:0px;\">The semantics of !important rules mean that users with particular   presentation requirements can override the author&#8217;s style sheets. <\/li>\n<li style=\"padding:0px; margin:0px;\">The new &#8216;inherit&#8217; value for all properties improves cascading generality and   allows for easier and more consistent style tuning. <\/li>\n<li style=\"padding:0px; margin:0px;\">Improved media support, including media groups and the braille, embossed,   and tty media types, will allow users and authors to tailor pages to those   devices. <\/li>\n<li style=\"padding:0px; margin:0px;\">Aural properties give control over voice and audio output. <\/li>\n<li style=\"padding:0px; margin:0px;\">The attribute selectors, &#8216;attr()&#8217; function, and &#8216;content&#8217; property give   access to alternate content. <\/li>\n<li style=\"padding:0px; margin:0px;\">Counters and section\/paragraph numbering can improve document navigability   and save on indenting spacing (important for braille devices). The   &#8216;word-spacing&#8217; and &#8216;text-indent&#8217; properties also eliminate the need for extra   whitespace in the document. <\/li>\n<p>    <\/ul>\n<p>  <\/li>\n<p><\/ul>\n<p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS design principles CSS3 as CSS2 and CSS1 before it, is based on a set of design principles: Forward and backward compatibility. CSS2 user agents will be able to understand CSS1 style sheets. CSS1 user agents will be able to read CSS2 style sheets and discard parts they don&#8217;t understand. Also, user agents with no &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,81,83],"tags":[],"class_list":["post-431","post","type-post","status-publish","format-standard","hentry","category-complete-css","category-css","category-css-principles"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pfoK1S-6X","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/comments?post=431"}],"version-history":[{"count":0,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/431\/revisions"}],"wp:attachment":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/media?parent=431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/categories?post=431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/tags?post=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}