Smart CSS by Desto Creative Solutions

At a glance Topic First Steps Toolkit  Prerequisites(in you)  Prerequisites(in your computer)  Resources on the Web Developing an approach Sketching out your site Justifying your sketch on digital grounds Digitalizing your sketch  Staying up to date  Laying out your site in <div> tags  Arranging a comfortable layout  Using only what is needed  Typography  Backgrounds Optimizing your page  Optimizing your HTML content  Optimizing your CSS styles  Optimizing your scripts Cross Browser compatibility Form factors and Compatible markup HTML5 CSS3 FlexBoxes Glossary

Page number

First steps This is not a tutorial on learning efficient CSS styling. It is just a toolkit, or rather a guide book to follow before you start developing the front-end framework of a website.

This book contains the things I learnt. Any CSS expert, geek, or stud, whatever learns from two sources, 

Self-experience



Better experts

But the main driving force for people to become better and better in styling is that they want to eliminate the first source. Novice stylers come across many hassles in their due course of learning or implementing what they learnt. But this is not what is always expected from them. While upgrading themselves with newer techniques of smart work, they should simultaneously learn how to predict errors. They should be able to think on their own, rather than obeying their boss’s order in a mundane way. I have anyway bugged up my first intern project and ended up pissing off my employer very badly. So, to all the future designers and front-end developers, this is all for you, this book also contains tips how NOT to piss off your employer.

Yours, Chaitanya Munukutla

Toolkit  Prerequisites(in you)  Prerequisites(on your computer)  Resources on the Web

Prerequisites (in you) | Toolkit One main prerequisite is that you should know almost every CSS attribute in the market. As to the day of writing this book, CSS3.0 has just made its army ready for invading the web-market. Many front-end developers sometimes need to write the HTML markup themselves, at least I needed to. So you should also have a thorough idea of all the HTML tags you would be working with. JavaScript sometimes makes life look so simple. So, it is necessary that you can manage to pull off writing tiny bits of code, for example changing the background of an element when you click it. Ajax makes it easy to optimize web sites with a relatively larger site maps. So, a CSS expert should be an Ajax novice coder. PHP helps us to replace frequently used elements or blocks like a global menu bar, or a footer element, with a simple one line code. So, itâ&#x20AC;&#x2122;s better to know these cute little tweaks in PHP.

Prerequisites (on your computer)

You should groom up your computer before your start working, implementing, or even practising any web development projects.

 Web Development IDEs



Adobe Dreamweaver CS5/CS6: CS6 has extended support for HTML5 and CSS3.0, while CS5 has basic syntax highlighting for HTML5.(proprietary)



Microsoft Visual Studio: Visual Studio 2010 has native support for HTML4.01 and CSS2.1 while Visual Studio 2012 has extended and Intellisense support for HTML5, CSS3, XHTML, PHP and JavaScript.(proprietary)



Microsoft Webmatrix: A tiny bit of software with basic support for HTML5 and CSS3 and a plethora of web hosting applications.(freeware)



Aptana Studio: So far, the best open source alternative for Dreamweaver CS6, with error and syntax highlighting for HTML5, CSS3.0, PHP, JavaScript etc. and is built over an Eclipse core(open-source)



Eclipse: The legendary open-source IDE for everything under the sun. A wide variety of plugins for IntelliSense, syntax highlighting for web scripting.(opensource)



NetBeans: Easy to use interface, excellent plugin support from NetBeans Community.(open-source)

(IDE abbr. Integrated Development Environment, a program which created default templates, gives suggestions, autocompletes commands etc.)

 Local Web Application Frameworks More often than not, you’ll be working with your back-end counterparts. So, it’s obvious that they render all their pages in .php format. So it is necessary that you have your browsers compatible with them. There is more than one of them available for any operating you will be developing. 

WAMP server



XAMPP server



MAMP server(Mac OS X only)



LAMP server(Linux only)

 Other Software Apart from traditional Web Development, you should try your novice hand at Adobe Photoshop, Adobe Illustrator etc. Sometimes when catastrophe strike you might need to add transparency to your image, render favicons etc. It’s not required to explore and make yourself an expert in them, but you should manage to pull off simple things.

Resources on the Web Probably the best place for you to find or explore out of the box ideas for enhancing your website is on the web itself. There is a vast community out there extending support for novice designers. Here are a few of them. 

W3Schools.com: The largest available online encyclopedia for the web. Has a detailed explanation of every HTML tag, every CSS style, every JavaScript code and what not.



W3.org: The official consortium of web standards. Contains demoed versions of currently used, deprecated and even upcoming tags. A vast resource, but a bit tedious navigation.



CSS Tricks: A designer blog by Chris Coyier, reflecting newer techniques and smart styling. A very interesting and captivating one.



Mozilla Developer Network: My new discovery over the web, a large developer network hosted by Mozilla Corporation, containing efficient guides for HTML5, CSS3, JavaScript, APIs, Geolocation services and many more.

Developing an Approach Another prerequisite to be present in a web-designer is an efficient approach towards the project he is allotted. He should not just rub his shoulders off by just implementing what the client wants him to reflect. One must develop an intimate relation with the concept for him to involve in a creative way. When a client requests you to create a website, or a portal for his company or for himself, he is not just dumping you with a mundane job of allotting you a burden of work; he also wants the website to reflect what his company does in the offline mode. It would be bad to design the website the US Army website with a Tom & Jerry marquee rolling out on the top. The motive, business model, social status, seriousness or the funniness of a company should be clearly reflected from the website you design.

The White House Official Web page

Take a look at the screeshot above. The colour scheme of the website, a darker shade of blue matches with the theme color of the US national Government. Its not always important to make your site flashy and glowy. Simplicity sometimes does the job, as in the above case.

Apple Inc.â&#x20AC;&#x2122;s Homepage Apple.comâ&#x20AC;&#x2122;s webpage scheme matches with the product color theme of Apple products. The curved and beveled edges of the blocks of data reflect the curved edges of MacBook and iPads.

Sketching out your site This is one of the most important but frequently forgotten practices by designers. It is not just enough if you open up your laptop, run Dreamweaver and start laying your website out. It doesn’t at all work that way. Remember what architects do???? SKETCH. If all the architects open up AutoCAD and start designing, all the buildings in the city would look like the Sydney Opera House. Take up the tiring task of fetching a paper, a pencil, a ruler to draw simple layouts of your site. I know it’s like going back to primary school, but this is how it should be. It is better to have the client not beside you while preparing your sketch, because some people have this weakness of not being able to work when people keep horning them in their ear what to do and how to do. He might have well given you a software explanation booklet describing how the website should function. You should always have that booklet beside you whenever you are fiddling with your work. First go through the booklet thoroughly and get a clear understanding of your job. Some projects like ecommerce portals, intranet Social Networking portals should serve a wide variety of needs; take care that you don’t miss any of them. Sketching out a page doesn’t simply means drawing cartoons on your pages and throwing it on your client’s face. He has appointed you to reflect his business. So, basically your task is a lot more than creating a web page and hosting it. You should create a user-interface that will provide the user, the same experience as he will, when he, in reality goes to their office for the same work; this is called Intuitive User Interfacing (IUI). IUI plays a great role in making your website a success. The user has absolutely no business to see what you think is a feast to the eyes. He wants to look at things that are his priority, at that moment. This is what drives the user to visit your page more and more. Always ask yourself, WHY not HOW. For example, when you redirect a user from one page to another within your website, question as to why would the user want to navigate to a whole new page for his purpose. If his purpose is small enough, you can well incorporate that in the same page just refreshing the content you want him to view.

If you feel that your pencil sketching business has come to an end, now letâ&#x20AC;&#x2122;s digitalize it. There are a number of software which allow us to layout wireframes of our pencil sketches.

Microsoft Visio 2010

Adobe InDesign CS5

Justifying the sketch on digital grounds Supposing that you have successfully finished your sketch, now let’s slowly start moving onto your laptop work. Henceforth, let’s assume that your back-end counterpart is too lazy to code the HTML part of it, and you have that burden too. So, you have to lay out all of your designs onto your browser now. Let’s start off. Till now, you have done a great job of sketching your ideas onto Visio™ or InDesign®. But at the end of the day, it’s the browser that has to render all your designs electronically. So, there are situations where the current technologies can’t support your ideas yet, or not yet supported on all platforms. Although your website is like a book to the user, you can’t really promise to deliver the same experience of reading a book. For examples, if you want to port a novel onto a website, and you use one page on your code to reflect one page on the book, it’s going to suck real badly. Take a situation, where the reader wants to back-verify a scene or line from the previous page, he has to navigate back to the previous page, and finally we put the experience of the user at stake of the internet connection speed he is equipped with. This should not be the case. We should remember that there are things that books can do and computers can’t. Frequently, these are the things that are overlooked. One alternate escape that most designers do is to include heavy plugins and load the page like a rice sack. This is where smart work comes to use. This smart work can’t be ruled as the laws of CSS in any book or even this one. It should be felt and worked out at the right moment.

Digitalizing your Sketch  Staying up to date  Laying out your site in divisions  Using only what is needed  Typography  Backgrounds It’s finally time to take your laptop out and start real coding. And there are certain dos and don’ts here too. Don’t ever work on stray files. They make your work real buggy and nasty to look at. Every IDE, let it be a Programming IDE or a Web IDE, have inbuilt options to build projects. This is what you have to do. They actually make all work look segregated and organized both to look and to work on. Make sure that you name all your files with a .php extension because this is how your back-end counterpart would be taking up from you to script PHP into. A PHP extension does no harm to your HTML or CSS content. Even the syntax and error highlighting don’t really change. Create separate directories for CSS files, images and JavaScript files. Throw all the .php files into the main directory, no matter. So, open up your laptop, run your IDE and get started.

Staying up to date As important are security updates to your computer, so important are design updates to your mind. You should catch the nerve and the interest of the user living in this era of computing. You canâ&#x20AC;&#x2122;t finally end up designing as 1970â&#x20AC;&#x2122;s website in 2012. That would be simply awful to look at. The main perspective of how to design a website surely should come from noticing the web keenly. It is not enough just to login to facebook.com and chat with your friends anymore. Look at the design point of it for a while.

thefacebook.com in 2004

facebook.com in 2012 A brief look at the above two pictures gives us an insight of how the perception of the minds of people in looking at websites has change within a span of 8 years. A brief case study, 

The 2004 design is more of a square-ish model and the 2012 one is a bit landscaped. This is because of the variation of a majority of laptops, desktops and appliances from 4:3 to 16:9 aspect ratios.



Though the theme color hasn’t changed, the newer page is a kind of plain and smooth as compared to the 2004 header which had some funky geek codes hanging around the titular face out there.



The long bulleted list in the 2004 design has been replaced by a single line, “Facebook helps you connect and share with the people in your life.” On observation, we find that all the information in that list has been conveyed here pretty clearly. This can be attributed to the users hating to read long theses.



Both the Login and the Register forms have been embedded in the same page in 2012. This reflects the attitude of the user who feels it is rather comfortable to get all the cluttered things right in the home page, neatly arranged.



The 2012 design doesn’t have a single border line, box shadow or anything of that sort. It is because people have slowly come to know the fact that border actually distract the user from the main content, rather than adding beauty. You can look for many design changes for websites at http://www.waybackmachine.org/.

Laying out your site in divisions

Now, we come to the technical parts of the designing process. Always remember to keep your website as organized as your study desk. Stray elements make life painful and difficult to handle in the future in case of any changes to make. As far as I am concerned, any web page should have the following crude layout

This ensures that all the contents you want to appear on your beautiful screen donâ&#x20AC;&#x2122;t run away when you zoom in, change the positions of other elements or something like that.

The above crude code would give you something like what looks below.

You can now begin to explore and modify the body content as per your interest. This not only makes your work further easy, but also gives a professional look to your page.

But make sure you donâ&#x20AC;&#x2122;t declare position: absolute to any random element you feel like. The position attribute of CSS is one of the boons given to designers to create magic on the page. Relative positions combined with appropriate float attributes let you out of many hassles like proper alignment, weird behavior on larger displays etc.

Using only what is needed

More often than not, most of us would fancy using all of that available canvas space (screen space). But it doesnâ&#x20AC;&#x2122;t work out that way, at least not always. A better way of designing of designing a clutter free page is to leave about 10-15% empty space along the edges of the document. This gives the page a portrayed look which works well which the vertical scroll found in almost all websites.

A look at Apple Inc.â&#x20AC;&#x2122;s homepage would reveal the amount of white space (it is 110px to be precise) left at the left and right margins. And it has worked out to be one of the most beautiful websites ever known to man.

Typography Good typography is one more area where care is to be taken. Contraction free elegant fonts are what people want to see. Not artistic and jeweled brides on the website.

alistpart.com, one of the best typographies I have ever seen A detailed look at the above page would reveal many things about the typographic strategies used. A List Apart is a website that publishes articles for people who want to make websites; the same is its tagline too. 

Since the website basically publishes weekly articles, the main attention of the reader should be focused on the article, not the menu bar, index list, not even the logo. That’s why, all these unwanted extras are thrown to the right side of the page and the articles are floated towards the left, as an average human brain (unless you are Arabic) is accustomed to process data from the top and left.



Each ‘issue’ of the page generally contains two articles, so a brief snippet of what you are going to read in that issue is given as a small super-heading for the issue heading.



The main website logo is extended and made almost like a flag hoist and put up at the top left, for easier access to the homepage.



It is widely followed practice of displaying links in an artistic way, underlining them when hovered, making them bold etc. But what we have to keep in mind is that, whether the link is unhovered, hovered, active or visited, it should be in sync with the color theme and the typography of the page. This is what is done in the above page.

Never use bold style for anything and everything you want to emphasize in a paragraph. It makes the paragraph looked biased to that point where it is in bold. Instead, make a link, cross reference it to some other location on the same page, and try to throw more light on the term, rather than just making it bold. If at all you wanted to insert a sub-article, or to place a link to the next article in this article, as in the case of magazine or newspaper websites, don’t just place a “Next Chapter” or “Next Article” at the end of this page. Make up some space at the bottom, and insert a small snippet or a sneak peak of what the reader is going to view next. You can now make the heading of this snippet as a link, or put up a “Read the full article” link at the end. This makes your site look authentic and professional. Clear-type displays are one of the emerging technologies layered on smartphones, tablets and other touch PCs. So, it expects a site to be as clear when zoomed to 400% as to when viewed normally. So, we should be sure that that fonts are in hi-definition, and if at all you want to use a better font which would make your website look awesome, don’t hesitate to include the true-type font file.

Backgrounds Finally, coming to the cosmetics section of your website. I take the liberty of quoting on of my own, “If the gateway of a bungalow is rusted, no one cares to look how ravishing the sofas inside are.” Leave apart the content, the typography, layouts and all other bullsh*t, the only thing that gives a first impression to the user is your background. So, the look and the feel of your website depend upon how much expertise is put into the hardest task, deciding that unique six character hex code of the color or the texture of your background. Don’t at all be convinced with one hex code. Try out all different choices you have, I think you theoretically have 166 of them!! The background you choose should sync with  The motive and concept of the site  The theme color of the web site  The typography put into it.

Optimizing your page  Optimizing HTML content  Optimizing style sheets  Optimizing your scripts

Optimizing HTML content It is obvious that you would not be working on a project that displays the number of students in your class. You would be working on big ones; like portals, e-commerce platforms and things like that. So, it is not uncommon to have a very sophisticated homepage and mind-boggling sizes for your index.php which is by far known, your homepage. A typical index.php file, at least when I did my first intern sized 41.2KB. We may not look at the 41.2 in that; we only look at the KB. Sizes that really matter very small to us are indeed big enough to render our browser layout engines. All the more, you should also keep in mind that you would be including scripts, linking style sheets, placing images and all such stuff happens even without our knowledge. For example, the linkage line

homestyles.css should also be included and downloaded by the engine to style your page on the fly. So, this behind the stage drama should be given a break. As we have supposed, we work on sites with a large site map. So, for almost all corporate websites, they do have a common header bar, and common global menu and most likely a common footer. So, what is advisable is, create php files like header.php,

menu.php,

footer.php and just include them in your index page wherever you want the content to be displayed. This would at least decrease the site weight of your website. To optimize this on the server-end too, just declare an onload()

function to

asynchronously load the included .php files in the back-end and used whenever more and more pages are called. The asynchronous loading will also come to rescue when you have a hi-definition background image to load, large script libraries to source up etc. Thought browser cache looks after it, the function does it in an elegant and no-hassle manner.

Optimizing style sheets The beauty of the site. Stylesheets. Stylesheets are cosmetics, the more gently you use it, the more beautiful your site gets. I start this page with one order, NEVER USE INLINE STYLES. It is like devouring a burger and a pizza at the same time through two nostrils. Your HTML files should not contain even a single incidence of the word style. It is a widely seen custom to have separate stylesheets for each and every page of the framework. This is good practice, but only when it is utilized appropriately. As we have seen in the previous page, headers, footers, global menus are almost common to every page. By my experience, what designers usually do is, 

Make a style sheet for the index page



Create a blank CSS template.



Copy all the contents of the index style sheet



Add newer styles as they require for the new page.

Don’t you think that was too naïve??? By my opinion, the best practice is, 

Create a stylesheet named base.css



Style out the headers, footer, global menus and other elements common to EVERY page in that sheet.



Now go each HTML file, create a new corresponding stylesheet and style the REMAINING elements.



Link the base.css to all the pages.

This will reduce the site weight by almost 10%. And 10% reduction in site-weight is something like GREAT.

Optimizing scripts on your page Scripts on your page are only half beautiful – the half where they actually function. The sight of <script> tags in your HTML document looks nasty. Optimizing scripts is nothing but a repetition of what I have already told out on optimizing stylesheets. If at all you write your .js files using syntaxes like jQuery or XQuery make sure that you have included the jQuery.js library before all your personal scripts. You can avail the asynchronous load function for the jQuery library because on single instance needs 92KB to download. Never use pre-built libraries very extensively. There can be situations where you just need an onclick() animation and you end up including 92KB of wastage. You can make it a habit of managing such animations, hover effects using efficient CSS styling or tiny bits of native JavaScript code. Remember, 10 lines of code are far better than 92KB. For example, look at the following code samples; I don’t see much of a difference between native JavaScript and jQuery

<button onclick=”doThis()”>Click here</button> function doThis() { // required native JavaScript code }

<button>Click here</button> $(button).click(function { // required jQuery code });

Cross browser compatibility I am quite sure that all of us finish up all our work of designing, optimizing our pages on a single browser, may be our favorite one, like Mozilla’s Firefox (due to the critically acclaimed Firebug extension, or Opera Browser (also due to its near critically acclaimed Opera’s Dragonfly extension). But we obviously can’t expect all of our readers and users to use Firefox and Opera right!!! So, as important is the performance of our page, so important is its performance on all browsers. This is the post-browser war era. We are not in the 1990s where Microsoft’s Internet Explorer held the de facto position in web browsing. For a better overview just look at the following snippet from the Wikipedia article on Usage Share of Browsers.

So I don’t think it’s hard enough for you to observe the downfall of the usage share of Internet Explorer. But what one should really observe is the move of the usage to an almost equal share of usage with a slight dominance from Google’s Chrome and Microsoft’s Internet Explorer. Henceforth, whatever site goes live on the web, must be completely compatible and should fare well on at least 

Microsoft Corporation’s Internet Explorer (runs on the Trident Engine)



Google Inc.’s Chrome (runs on the Webkit Engine)



Mozilla Corporation’s Firefox (runs on the Gecko Engine)



Apple Inc.’s Safari (runs on the Webkit Engine)



Opera Software’s Opera (runs on the Presto Engine)

Finally since the rendering capacity or the features of any browser depend upon the Layout Engine it runs on, it is quite obvious that mild changes in the rendering occur when we try to make a web page Cross Browser compatible. Here’s when we should take up a little bit of patience and try to write up different stylesheets for different browsers, at least for Internet Explorer. The Trident Engine has been really obstinate and obsolete until Internet Explorer 10 was released. But since IE 10 is not yet into the limelight, we are bound to have hassles with it.

<link rel=”stylesheet” href=”not-ie.css” />

I don’t think the above code snippets need any explanation!!

Form factors and Compatible markup Gone are the days when you had one big box like PC on your desk, you go switch it on, go for your morning walk, come back and have your coffee and then finally your Welcome screen greets you, Good Morning dude !! This is the age of COMFORT and COMPATIBILITY. Today’s digital devices are of the type – you switch it on, turn to your friend and tell him, “Hey man, see my new phone!!” and by the time you finish your sentence, your phone beeps, “You have 3 unread messages, 6 missed calls from your ex; Congrats, you are single now!!!” The devices are today are everywhere. And they are ALL equipped with data plans, Wi-Fi, Bluetooth tethered internet and many more means of communication. So you can’t rub the job off your shoulders by building your site that runs on a 1366x768 display PC but goes haywire when viewed on a smartphone. Make sure that you have enough technical knowledge about the various form factors ruling the market; at least the dominant of them. What comes to the rescue here are media queries introduced in CSS3. They actually create media-dependent style rules based on logical operators. Media queries basically render when the layouts of the page are fluid. We’ll talk about fluid layouts after a couple of sections. It includes media types like braille, print, projector, screen, TV, handheld etc. Some of the commonly available, or more aptly, some of the most commonly availed media features in media querying are height, width, color, scan, resolution etc. I really don’t intend to stretch my book by copying all that syntax down here. An exhaustive list of all the media querying operators can be found at the Mozilla Developer’s Network – CSS Media Queries Anyway, the official CSS Media Queries can be found at the W3 Consortium – CSS Media Queries.

HTML5 My fingers are pained of typing. So HTML5, my favorite topic has come to my rescue. Hail HTML5!!! HTML5 is markup language re-imagined at a whole new level. The amount and the number of significant changes it has brought to the web, is unbelievably magnificent.

Here are some of the trademarks changes in HTML5. 

HTML5 multimedia



HTML5 graphics



HTML5 applications



HTML5 semantic elements



HTML5 form enhancements



Fully compatible with CSS3.0

I now start my boring pages guys …. All the HTML5 freaks, fetch a cup of coffee and continue reading …

HTML5 Multimedia (Video & Audio) The HTML5 native multimedia support got rid of the painful <object> tags and its parameter hassles. Now all that you need to embed a multimedia object onto your webpage is literally THREE lines of code.

<video width=”640” height=”320” controls=”controls”> <source src=”filename.mp4” type=”video/mp4” /> </video> and you are done!!!! (The controls parameter, if not present, the PLAY, PAUSE, VOLUME controls are not displayed) I don’t think I write the markup for the audio tag. The only difference is that you needn’t specify the width and height.

Browser Internet Explorer 9 and above Mozilla Firefox 4.0 and above Google Chrome 6 and above Apple Safari 5 and above Opera 11 and above

Video format support .mp4 .webM .ogg Yes No No No Yes Yes Yes Yes Yes Yes No No No Yes Yes

Audio format support .mp3 .wav .ogg Yes No No No Yes Yes Yes Yes Yes Yes Yes No No Yes Yes

This eventually aims at removing the Adobe Flash from the face of web video.

HTML5 Graphics (Canvas & SVG) The newly introduced canvas API lets you to draw 2D graphics on the fly, but coupled with a JavaScript function and is rendered pixel by pixel. But the only let down known in the canvas element is that, once it is rendered (or drawn) by the browser, it is forgotten. If at all we wish to change its position once it is drawn, we’ll have to redraw the whole canvas and the re-render it. On the other hand, SVG is a language used to describe 2D graphics in XML. Since SVG is based on XML, every object drawn as an SVG is remembered as an object. So if at all the attributed of an existing SVG element are changed, the DOM automatically re-renders the page. All the more, SVG also includes clean animatable reference elements, which may prove quite a tough job for JavaScript libraries to stand up for competition in the future.

HTML5 Applications This may be called as the revolution of the century in the field of web applications. Imagine a situation when you are seriously(I mean … quite seriously) playing an online game(like Angry Birds for example) and suddenly you need to go to another place, and the en route is not equipped with an internet connection. So, it is obvious that you stop playing the game(anyway, once the connection goes down, the game stops!!) and continue after you reach another Wi-Fi equipped station. This is what HTML5 guys hate. HTML5 provides an application caching mechanism that lets web apps run offline. Developers can use the AppCache (Application Caching) interface to specify what resources should be cached by the browser and made available to the offline users. So, the resource that are cached, load correctly even if the refresh button is clicked. Using the AppCache fetches good for three reasons 

Users can navigate to a site even when offline.



Since cached resources are local, they load faster.



Since browser uses internet connection only to load updated cache resource, server load is drastically reduced.

This AppCache should be enabled by specifying an appcache source in the html tag,

CACHE MANIFEST # Offline resources /index.html /index-styles.css

this is the myoffline.appcache file

HTML5 Semantic Elements Old wine in a new bottle!!! This is not much of a revolutionary improvement unlike the last one, but provides more of an intuitive approach of designing websites. They are like spin-off versions of the div and span tags; they provide the same functionality but with a different name. Some of them are      

blockquote fieldset details figure section article

    

aside footer header nav hgroup

This basically gives us a systematic and authentic overview of the sections and outlining of the whole document. <div class=”header”>

//header content

</div>

</header>

Traditional HTML 4.01

HTML5 Semantics

In a broader range of view, this may eventually decrease the number of classes to be remembered by the designer. Additional and informative content about HTML5 semantics can be found at Mozilla Developer’s Network – Sections and Outlines of an HTML5 document.

HTML5 Forms HTML5 has introduced newer types of input and various other attributes for each input which mainly aim on enhanced control of form elements and improved validation methods. Some of the newly introduced input types are 

color



range



date



datetime



tel



datetime-local



time



url



month



week



number

The color and the date types have been introduced so as to eliminate the use of external plugins for date picking and color selection. The email, tel, url, range have implemented inbuilt validation and screening of the input on the flow as the user types them in. For example, tel input type doesn’t respond when alphabets are typed. Several attributes for the input types have also been introduced, 

autocomplete



height and width



autofocus



list



form



min and max



formaction



multiple



formenctype



pattern (regexp)



formmethod



placeholder



formnovalidate



required



formtarget



step

Three new form elements namely, datalist, keygen, output have also been incorporated. 

The datalist element drops down autocomplete suggestions as the user types in into a text input, while the datalist itself is fed into the file.



The keygen element enhances security of credentials like passwords and bank account numbers. The user has two choices to take, either a 2028-bit High grade encryption or a 1024-bit Medium grade encryption. The entry is then stored with the input typed by the user and followed by a 2048 char long or a 1024 char long encryption key.



The output element represents the result of the calculations, like it was done with JavaScript.

A detailed documentation on HTML5 form improvements can be found at Mozilla Developer’s Network – Forms in HTML5.

CSS3 CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long awaited novelties, like rounded corners, shadows, gradients , transitions or animations , as well as new layouts like multicolumns , flexible box or grid layouts. The

CSS3

official

specification

still

under

development by the W3 Consortium, but many of the new CSS3 properties already supported by most of the major browsers. CSS3 is split up into modules. Some of the important modules of CSS3 are 

Selectors



Box-model



Backgrounds and Borders



Text Effects



2D and 3D transformations



Animations



Multiple Column Layout



User Interface

CSS3.0 has laid an emphasis on minimizing the usage of JavaScript functions and libraries for animations, transforms etc. Let us take a sneak peek over the improvements of CSS3.0 over CSS2.1.

CSS3 Selectors There were about fifteen selector improvements in CSS3. These enhance the control over specific elements with respect to their parent elements and vice-versa. The new selectors included in CSS3 are 

element1~element2



[attribute^=value]



[attribute$=value]



[attribute*=value]



:first-of-type



:last-of-type



:only-of-type



:only-child



:nth-child(n)



:nth-last-child(n)



:nth-of-type(n)



:nth-last-of-type(n)



:last-child



:root



:empty



:target



:enabled



:disabled



:checked



:not(selector)



::selection

An elaborate syntax use and demo collection can be found at Mozilla Developer’s Network – CSS3, and W3 Consortium – CSS3.

CSS3 Backgrounds & Borders With CSS3, you can create rounded borders, add drop shadows to them and even add an image as its border.

border-top-leftradius

border-bottomleft-radius

border-top-rightradius

border-bottomright-radius

The syntax of the box-shadow property is also pretty straight forward

box-shadow : <offset-x> <offset-y> <blur-radius> <spread-radius>

CSS3 also brings the possibility of specifying the size of the background-image of the page or of a particular element.

The background-origin attribute of CSS3 allows us to specifies us to position our desired background with respect to the element, i.e., in the content-box, padding-box, or the margin-box.

CSS3 Text Effects CSS3 has introduced two new text-effects attributes; the text-shadow, and the wordwrap.

The text-shadow is as to text as the box-shadow is to boxes.

Text-shadow The syntax of the text-shadow is similar to that of box-shadow with a slight modification

text-shadow : <offset-x> <offset-y> <blur-radius> <color>

The word-wrap attribute allows the reflow of text when its parent or the enclosing elements are small than the word which over-flows out of the element. This is an example

This is an example

where the word-wrap attribute

where the word-wrap att-

is disabled. So, words overflow

-ribute is enabled. So, the

out of the parent.

Words donâ&#x20AC;&#x2122;t overflow ou-t of the parent.

It has two values, normal or break-word. The normal word-wrap flows the whole word onto the next line, while the break-word inserts a hyphen and breaks the word.

CSS3 2D and 3D Transforms The new CSS transform property lets us modify co-ordinate space of the CSS visual formatting model. We shall have a sneak at some features of the various 2D and 3D transform functions available.

CSS Property rotate scale scaleX and scaleY skewX and skewY translate translateX and translateY

Description Rotates the element about its origin by the specified angle Scales the element as per the described by the set [sx, sy] Specifically scales the element along X and Y axes by the specified ratio. Specifically skews the element along X and Y axes by the specified angle. Translates the element as per the set [tx, ty] Specifically translates the element along X and Y axes by the specified distance

Syntax transform : rotate(30deg) transform : scale(3,4); transform : scaleX(3); transform : scaleY(4); transform : skewX(45deg); transform : skewY(30deg); transform : translate(100,200); transform : translateX(100); transform : translateY(200);

CSS3 Flexible Layouts The CSS Flexible Box Layout Model or often called the flexbox layouts is an improvement platform where the layouts of specific elements on the page behave as predicted on scaled to different form factors(or screen sizes). Saying it in simple terms, it enhances the block layout model which lay out elements on the page using the float attribute. So it is obvious to take it for granted that flexible box layouts don’t use float.

The flex- implementation The flex- implementation is the most current implementation of flexbox developing over the beta usage of the box- implementation. To designate CSS properties of elements using this style, we set the display property as follows display : flex; or display : inline-flex; The above declaration defines both the element and its children as flex elements. While the flex value makes the flex container a box level element, the inline-flex value makes it an atomic level inline element. As of now, it is safer to use vendor prefixes such as –webkit-flex, -moz-flex, -oflex etc., as the standard is still under experimental stage.

Flex boxes vocabulary The vocabulary of flex boxes doesn’t involve the definitions of the vertical (or the block) axis and the horizontal (or the inline) axis. Instead there are special terms coined for it to have a better understanding for the whole subject.

Let us look at a small case study here.

As the frame says, the flex items are arranged in a row fashion. So the flex container is said to have a flex-direction : row layout. So, the axis along which the flex-items are laid out is called the main-axis (here, the X axis), and the size of the children along the main axis is termed the main-size. The axis perpendicular to the main axis is called the cross-axis and the size of the children along the cross-axis is called the cross-size. Hence, for a flex-direction : column layout would have the main-axis as the Y axis and the cross-axis as the X axis. Intuitively, the three flex items are placed in a container called a flex container. A block level child, an atomic inline level child, a pure HTML element tagged inside a flex container is called a flex item. It is a caution to note that absolutely positioned elements in flex containers are not considered as flex items.

flex- properties Here are some of the properties of the current flex box standards as drafted by the W3 Consortium.

align-items This property aligns flex items of the current flex line in the same way as the justify-content but in the perpendicular direction. align-items : flex-start | flex-end | center | baseline | stretch

align-self This property aligns flex items of the current flex line over-riding the align-items value. align-self : flex-start | flex-end | center | baseline | stretch

flex-basis This property declares the initial main-size of a flex item. flex-basis : value

flex-direction This property declares how the flex items are placed in the flex container, specifying the main axis and the direction.

flex-direction : row | row-reverse | column | column-reverse

flex-flow This property is a shorthand property for the flex-direction and the flex-wrap properties.

flex-flow : row | row-reverse | column | column-reverse || no-wrap | wrap | wrap-reverse

flex-grow This property declares the flex-grow ratio of a flex item.

flex-grow : value

flex-shrink This property declares the flex-shrink ratio of a flex item.

flex-shrink : value

flex-wrap This property specifies whether the flex-items are forced into a single line or can be flowed on multiple lines.

flex-wrap : no-wrap | wrap | wrap-reverse

justify-content This property aligns the flex items in the main axis of the current line.

justify-content : flex-start | flex-end | center | space-between | space-around

order This property specifies the order in which the flex should be laid out in the flex container in the ascending order of the value.

order : <number>

More on CSS Flexible Box Layouts can be found at the Mozilla Developer Network Flexbox

Glossary 

IDE (Integrated Development Environment) is a software application that provides enhanced user facilities for programmers for software and app development.



IntelliSense is Microsoft’s implementation of auto-completion, widely known for its use in Microsoft’s Visual Studio. Besides supporting as an auto-completion tool, it also serves as documentation for variable names, functions and methods.



TrueType Font format is an outline font standard developed by Apple Inc. It has now become the most common font format for the Mac OS X and the Microsoft Windows operating systems.



Browser Cache is a mechanism is temporary storage of web documents such as HTML documents and images in order to reduce bandwidth usage and server load.



Site Map is a list of pages of a website accessible to crawlers and users.



Site Weight is the size of a compressed zip folder enclosing each and every web document of a website.



jQuery is a cross-browser JavaScript library intended to ease the client-side scripting of HTML. (http://www.jquery.com/)



Browser Wars is a metaphorical term that refers to competitions for dominance in the usage share in the web-browser marketplace.



Web Browser Engine (or Layout Engine) is a software component that takes up the marked content(like HTML, XML, image files etc.) and the formatting information(like CSS, XSL etc.) and renders it on the screen.

To be continuedâ&#x20AC;Ś