HTML and CSS Reference
In-Depth Information
Content in Logical Order
Even though CSS styling makes it possible to arbitrarily position document sections and elements, content should be
written in a logical order. This approach has the following advantages:
Easier development and maintenance
Higher efficiency in text-based browsers
.css file cannot be loaded or the
Legible and usable content even without CSS (in case the
style sheets are turned off )
Improved accessibility through advanced support for aural browsers and screen readers that
will read the pages without breaking continuity
Mobile-Friendly Layout
In Responsive Web Design, you can create conditional styles with CSS3 to be applied depending on the screen
resolution. On smartphones, even if the resolution is huge, it is more convenient to have a collapsed, easy-to-tap
menu than a wide menu on a full-width page. Tablets usually have bigger screens, while desktop monitors are even
bigger in size, but the resolution of smaller screens is not necessarily smaller than that of big monitors. The best
practice is to create the core styles for the site, and create conditional style override for the different screen resolution
ranges using min-width and/or max-width , and a font size proportionally bigger for smaller screens (Listing 13-1).
Mobile First Design means that the core styles are designed for mobile devices and the style override adjusts the layout
and font size to bigger screens while the standard approach is just the opposite.
Listing 13-1. Conditional CSS3 Styles for Different Screen Resolution Ranges
@media (min-width:320px) {
background: none;
#content {
width: 300px;
font-size: 7.2vw;
@media (min-width:480px) {
#content {
width: 460px;
font-size: 5.9vw;
Search WWH ::

Custom Search