LitArk » Books » Computer

Hampton-Smith - Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts

Here you can read online Hampton-Smith - Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. City: New York, year: 2016;2014, publisher: Apress, genre: Computer. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:

Romance novel Science fiction Adventure Detective Science History Home and family Prose Art Politics Computer Non-fiction Religion Business Children Humor

Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.

Book:
Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts
Author:
HamptonSmith / Sam
Publisher:
Apress
Genre:
Books / Computer
Year:
2016;2014
City:
New York
Rating:
3 / 5
Favourites:
Add to favourites
Your mark:
- 60
- 1
- 2
- 3
- 4
- 5

Description
Author's other books
Similar books

Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts: summary, description and annotation

We offer to read an annotation, description, summary or preface (depends on what the author of the book "Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.

Pro CSS3 Layout Techniques demonstrates the newest and most cutting-edge layout tools found within CSS3, allowing you to quickly create advanced design patterns for websites and apps.

This book teaches you how to make the most of CSS3s existing specification, including those parts of the specification already widely implemented, as well as the upcoming specification extensions that are still being developed by the W3C. After reading Pro CSS3 Layout Techniques youll be able to confidently develop sophisticated, vertical-aware layouts that arent possible with CSS2.

CSS1 allowed designers to separate content from presentation for the first time and CSS2 cemented support for advanced typographical control and integrated vendor-specific extensions, but neither specification provided more than rudimentary layout control. CSS3s latest additions allow designers to craft fully responsive, sophisticated layouts without the need for complex scripts or smoke and mirror workarounds.

CSS3 is still in active development, with browser vendors racing against each other to implement the latest recommendations from the W3C. Pro CSS3 Layout Techniques will help you cut through the waffle and get straight to the heart of what works now, while showing you how to be ready for the future of CSS!

What youll learn

What challenges web designers face when attempting to translate a static mock-up into a fully functioning website

How to use the new layout modules in CSS3, including multi-column layouts, the flexible box layout module, CSS grid layouts and CSS regions

Which techniques are safe to use today, and which are likely to be safe in the near future

Which are the best CSS libraries to use, and how to speed up your design workflow by using them

How to support older, non CSS3-compliant web browsers with polyfills

What the future holds for CSS layout, including proposed modules such as the Adobe-sponsored CSS exclusions module

Who this book is for

Pro CSS3 Layout Techniques is aimed at the web designer who yearns for the power and flexibility of print-layout tools, while keenly supporting the Responsive Web Design (RWD) approach to developing content that works across all devices. The book deals with a fundamental element of website design, but covers material many web professionals will be unaware of, making it an ideal purchase for all but the most technically sophisticated of web designers and developers. The book uses a tutorial-led approach to demonstrate real-world examples of new techniques, while providing an accessible reference guide for subsequent referral.

About the Author

Sam Hampton-Smith has worked with the web since the mid 1990s, and was an early adopter and proponent for CSS, the semantic web and separation of style and substance. He writes regularly for web and graphic design magazines, has contributed to numerous books, and previously was a visiting lecturer in multimedia design at the University of the Highlands and Islands. Sam loves making music, photography, being a little geeky, and exploring the world. He lives in Scotland with his four children.

Type : Programming

Hampton-Smith: author's other books

Who wrote Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts? Find out the surname, the name of the author of the book and a list of all author's works by series.

Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

↓

↑

Reset

Interval:

↓

↑

Bookmark:

Make

Sam Hampton-Smith 2016

Sam Hampton-Smith Pro CSS3 Layout Techniques 10.1007/978-1-4302-6503-0_1

1. Overcoming the Layout Challenges of the Web

Sam Hampton-Smith 1

(1)

Elgin, Morayshire, UK

Electronic supplementary material

The online version of this chapter (doi: 10.1007/978-1-4302-6503-0_1 ) contains supplementary material, which is available to authorized users.

Welcome to Pro CSS3 Layout Techniques !

Although it would be unfair to say that style is more important than substance, its certainly true that we all expect web sites to look good, to react responsively to our devices, and to rival other media for engagement. This means that as web designers, weve got the weight of expectation on us to generate ever-more-intuitive layouts, user-friendly presentations, and device-agnostic code. Although were up for the challenge, some of the core tools we have at our disposal either were never intended for layout or are now over a decade old. The Web has moved on, but layout tools haventuntil the arrival and implementation of CSS3, that is.

This book will cover the following topics:

Taking advantage of CSS3 layout modules
Determining whats viable today
Discovering what will be available for use in a live environment soon
Learning the best-practice approaches to layout using the CSS Level 2.1 specification where CSS3 is not available

Before we all get too excited about the new toys, its well worth understanding why we find ourselves in this position in the first place. And in order to get a proper grasp, we need to look back at the development of both HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). Dont worry: this review isnt going to be an exhaustive trip down memory lane, but it will serve you well when youre next using CSS to craft a layout.

HTML Attributes and Tags

When the Web was in its very early days, HTML was used both for markup and for styling. HTML attributes and tags defined the way a page looked. Decisions about how to mark up content were as likely to stem from a tags default visual characteristics as from any sense of semantic hierarchy. Consider the following examples and their uses:

tags for big, bold text, but also to signify the most important piece of information on the page.
for small text, but also to show paragraph text that provided the meat on the bones of the headings.
tags to align paragraphs and tables. Originally they were intended as a way to present tabular data only. These tags came to be used for creating sophisticated mult-column layouts that simply wouldnt have been possible with the limited set of tags and formatting attributes available within the language.

Although this approach was incredibly resourceful and creative, it led to some dreadful code that was both difficult to read and awkward to maintain. As layout demands became more complex, so tables came to be nested within each otheroften several layers deep. Visually redundant transparent spacer GIFs were increasingly used to ensure the correct positioning of elements. It became common for a simple page to contain hundreds or thousands of lines of unintelligible code like that shown in Listing .

WELCOME TO MY WEBSITE

ABOUT MY SITE

...

ABOUT ME

...

Listing 1-1.

Example of a Vast Listing to Create a Basic Two-Column Layout

This approach to coding and maintaining web sites raised issues that were obvious to everybody working with HTML. The Web needed a way to separate content from style, so the World Wide Web Consortium (W3C) stepped up to the task, developing the CSS Level 1 specification.

The Arrival of CSS

As the Web started to move beyond a simple text-based medium and became a more visual, magazine-style experience, it quickly became apparent that the limitations imposed by HTML styling were going to be an issue. The W3C, charged with defining standards for the Web, determined that it would be more sensible to separate style from content, and started work on a new language that would control the aesthetic treatment of content separate from the semantic meaning of that content. The solution was Cascading Style Sheets (CSS), the basis of all design and layout on the modern web page.

CSS Level 1

CSS Level 1 (CSS1) wasnt intended to act as a solution for implementing layout. Instead, the idea was to replace all the basic visual characteristics, such as color, font, margin, and border, that had been specified using HTML tags and attributes. The result was the following limited set of properties :

Width and height of block-level elements
Float, and clear of floating elements
Margins and padding
Background colors and images
Borders
Fonts and font styles
List styles
Some basic alignment

CSS1 allowed designs to take the basic styling of individual elements outside the HTML code itself. For the first time, the way a web site looked could be controlled from a single external file. This had massive benefits for the maintenance and consistency of page designs, because a single line of CSS code could now affect an entire web site. Previously, a simple heading color change meant editing every single page within a web site individually.

It took web browsers some time to adopt the new CSS specification because of a lack of competition in the browser market and relatively slow demand from designers. It wasnt until the late 1990s that designers could rely on the commonly used browsers, such as Netscape Navigator and Microsoft Internet Explorer, to parse and render CSS code with anything close to accuracy. Coincidentally, Microsoft and Netscape were battling for supremacy. Internet Explorer, shown in Figure , was the eventual victor.

Figure 1-1.

Internet Explorer on the Mac was the first CSS-compliant browser

Perhaps you are familiar with the use of floating elements as a system for creating layouts. However, the float and clear properties introduced with CSS1 were never intended for this purpose. They were meant to provide a CSS facsimile of the ALIGN=LEFT and ALIGN=RIGHT properties that had previously been part of HTML. The plan was to use them on images, allowing text to flow around elements automatically. Chapter discusses how to use floating elements effectively.

You may have noticed properties for width and height in the specification, which could be used to define the dimensions of elements. But their purpose was simply to replicate the same properties that were previously used in HTML as attributes on images, tables, and other block-level elements.

CSS1 was clearly a landmark for the Web. As it was implemented by browsers in the late 1990s, the W3C started work on the next iteration of the cascading stylesheet language: CSS Level 2.

CSS Level 2

One purpose of the design of CSS Level 2 was to implement some layout control in the stylesheet. This first attempt at moving layout from HTML to CSS was based on the table model that web designers had become accustomed to. A key new property introduced was display , and part of the specification provided for a value of table-cell to be applied. (See Figure .) This value, when properly rendered, lets you create a layout like that achieved using a table, complete with equal-height columns.

Light

Font size:

↓

↑

Reset

Interval:

↓

↑

Bookmark:

Make

Similar books «Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts»

Look at similar books to Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.

McFarland

CSS3: The Missing Manual

Greig

CSS3: pPushing the limits

Gasston

The Book of CSS3

Gregory

A Pocket Guide to CSS3 Layout Modules

Greig

CSS3 Pushing the Limits

David Karlins

HTML5 and CSS3 For Dummies

Smashing Magazine

Mastering CSS3

Benjamin LaGrone

HTML5 and CSS3 Responsive Web Design Cookbook

David Sawyer McFarland

CSS3: The Missing Manual

Christopher Murphy

Beginning HTML5 and CSS3: The Web Evolved

Chris Mills

Practical CSS3: Develop and Design

Marco Casario

CSS3 Solutions: Essential Techniques for CSS3 Developers

Reviews about «Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts»

Discussion, reviews of the book Pro CSS3 layout techniques: leverage the power of CSS3 to create sophisticated layouts and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.