CSS Tricks: HTML5

Showing posts with label HTML5. Show all posts

Thursday, January 24, 2013

What is HTML5 DocType?

A DOCTYPE is a required preparatory statement and must consist of the following characters, in this order:

A string that is an ASCII case-insensitive match for the string "
One or more space characters.
A string that is an ASCII case-insensitive match for the string "html".
Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
Zero or more space characters.
A U+003E GREATER-THAN SIGN character (>).

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Doctor | Element Index</title>
<link rel="stylesheet" href="style.css" />

</head>
<body id="home">
<p>content</p>
</body>
</html>

Thursday, October 4, 2012

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome. Read more >>

Linear Gradient (Top → Bottom)

    #linearBg2 { background-color: #fddfa4; background: url(images/linear_bg_2.png); background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(top, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2F2727, #fddfa4); }

Linear Gradient (Left → Right)

    #linearBg1 { background-color: #ec800b; background-repeat: repeat-y; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fddfa4), to(#2F2727)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4); }

Linear Gradient (with Even Stops)

#even-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.75, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4, #2F2727, #fddfa4, #2F2727); }

Linear Gradient (with Specified Arbitrary Stops)

    #arbitrary-stops { /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #fddfa4), color-stop(0.5, #2F2727), color-stop(0.95, #fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* IE 10 */ background: -ms-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2F2727, #fddfa4 5%, #2F2727, #fddfa4 95%, #2F2727); }

Radial Gradient (Centered, Full Size)

    #radial-center { background-color: #2F2727; background-image: url(images/radial_bg.png); background-position: center center; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(circle, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

Radial Gradient (Positioned, Sized)

Warning: Not Consistent Among Browsers

   #radial-position { background-color: #2F2727; background-position: 80% 20%; background-repeat: no-repeat; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fddfa4), to(#2F2727)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fddfa4, #2F2727); /* Opera cannot do radial gradients yet */ }

Tuesday, June 14, 2011

New Markup Elements for HTML5

New Markup Elements

New elements for better structure:

Tag	Description
<article>	For external content, like text from a news-article, blog, forum, or any other content from an external source
<aside>	For content aside from the content it is placed in. The aside content should be related to the surrounding content
<command>	A button, or a radiobutton, or a checkbox
<details>	For describing details about a document, or parts of a document
<summary>	A caption, or summary, inside the details element
<figure>	For grouping a section of stand-alone content, could be a video
<figcaption>	The caption of the figure section
<footer>	For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
<header>	For an introduction of a document or section, could include navigation
<hgroup>	For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
<mark>	For text that should be highlighted
<meter>	For a measurement, used only if the maximum and minimum values are known
<nav>	For a section of navigation
<progress>	The state of a work in progress
<ruby>	For ruby annotation (Chinese notes or characters)
<rt>	For explanation of the ruby annotation
<rp>	What to show browsers that do not support the ruby element
<section>	For a section in a document. Such as chapters, headers, footers, or any other sections of the document
<time>	For defining a time or a date, or both
<wbr>	Word break. For defining a line-break opportunity.

New Media Elements

HTML5 provides a new standard for media content:

Tag	Description
<audio>	For multimedia content, sounds, music or other audio streams
<video>	For video content, such as a movie clip or other video streams
<source>	For media resources for media elements, defined inside video or audio elements
<embed>	For embedded content, such as a plug-in

The Canvas Element

The canvas element uses JavaScript to make drawings on a web page.

Tag	Description
<canvas>	For making graphics with a script

New Form Elements

HTML5 offers more form elements, with more functionality:

Tag	Description
<datalist>	A list of options for input values
<keygen>	Generate keys to authenticate users
<output>	For different types of output, such as output written by a script

New Input Type Attribute Values

Also, the input element's type attribute has many new values, for
better input control before sending it to the server:

Type	Description
tel	The input value is of type telephone number
search	The input field is a search field
url	The input value is a URL
email	The input value is one or more email addresses
datetime	The input value is a date and/or time
date	The input value is a date
month	The input value is a month
week	The input value is a week
time	The input value is of type time
datetime-local	The input value is a local date/time
number	The input value is a number
range	The input value is a number in a given range
color	The input value is a hexadecimal color, like #FF8800

Friday, March 25, 2011

HTML5

നെറ്റിലൂടെയുള്ള ആശയവിനിമയത്തിനു ചുക്കാന്‍ പിടിക്കുന്ന വളരെ ലളിതമായ ഒരു കമ്പ്യൂട്ടര്‍ ഭാഷയാണ് HTML. ഈ അടുത്ത് ഇറങ്ങിയ HTML5 ആണ് HTML -ന്റെ പരിഷ്കരിച്ച അവസ്സന പതിപ്പ്. ഒരുപാട് പുതിയ ടാഗുകളും എപിഐ കളും ഉള്‍ക്കൊള്ളിച്ചുകൊണ്ട് വളരേ നൂതനമായൊരു ബ്രൗസിംങ് അനുഭവം പ്രദാനം ചെയ്യാന്‍ HTML5 നു കഴിയും എന്നു വേണം കരുതാന്‍. HTML 4.01, XHTML 1.0 , DOM Level 2 HTML ഇവയ്ക്കു ശേഷം ഇറങ്ങിയ അടുത്ത വെബ്‌സ്റ്റാന്‍‌ഡേര്‍ഡായിട്ടാണ്‌ HTML5 ഇറങ്ങിയിരിക്കുന്നത്. Flash, Silverlight, Java തുടങ്ങിയ RIA Technologies നെ കുറിച്ചുള്ള വേവലാതി ഇനി വേണ്ട. ഇവ സപ്പോര്‍‌ഡ് ചെയ്യാനുതകുന്ന ടാഗുകളും അതിനു വേണ്ട അപിഐ കളും HTML5 നോടൊപ്പം കൂട്ടിച്ചേര്‍ത്തിരിക്കുന്നു. ഔദ്യോഗികമായി ഇതു പുറത്തിറങ്ങിയെങ്കിലും HTML5 സ്റ്റാന്‍ഡേഡൈസേഷന്‍ വരും വര്‍ഷങ്ങളിലും തുടരും. എല്ലാ ബ്രൗസറുകളും HTML5 ലെ എല്ലാ ടാഗുകളെയും സപ്പോര്‍ട്ട് ചെയ്‌തു തുടങ്ങിയിട്ടില്ല. എങ്കിലും മോസില്ല, ഗൂഗിള്‍ ക്രോം എന്നിവയില്‍ HTML5 ശക്തി വളരേ പ്രകടമായി കാണാവുന്നതാണ്. ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ എന്ന മൈക്രോസോഫ്‌റ്റ് ബ്രൗസറിന്റെ പരിഷ്‌കരിച്ച പതിപ്പായ ഇന്റെര്‍നെറ്റ് എക്സ്പ്ലോറര്‍ 9 - ഇല്‍ ആണ് HTML5 ന്റെ പ്രകടനം താരതമ്യേന വളരേ കുറവാണ്.

താഴെ HTML ടാഗുകളും അതില്‍ പുതിയതായി ചേര്‍ത്ത HTML5 ടാഗുകളേയും കാണിച്ചിരിക്കുന്നു. അധികവായനക്കായി http://www.w3schools.com എന്ന സൈറ്റിലേക്കുള്ള ലിങ്കും കൊടുത്തിട്ടുണ്ട്.

Tag	Description
<!--...-->	Defines a comment
<!DOCTYPE>	Defines the document type
<a>	Defines a hyperlink
<abbr>	Defines an abbreviation
<acronym>	Not supported in HTML5.
<address>	Defines an address element
<applet>	Not supported in HTML5.
<area>	Defines an area inside an image map
<article>New	Defines an article
<aside>New	Defines content aside from the page content
<audio>New	Defines sound content
<b>	Defines bold text
<base>	Defines a base URL for all the links in a page
<basefont>	Not supported in HTML5.
<bdo>	Defines the direction of text display
<big>	Not supported in HTML5.
<blockquote>	Defines a long quotation
<body>	Defines the body element
<br>	Inserts a single line break
<button>	Defines a push button
<canvas>New	Defines graphics
<caption>	Defines a table caption
<center>	Not supported in HTML5.
<cite>	Defines a citation
<code>	Defines computer code text
<col>	Defines attributes for table columns
<colgroup>	Defines groups of table columns
<command>New	Defines a command button
<datalist>New	Defines a dropdown list
<dd>	Defines a definition description
<del>	Defines deleted text
<details>New	Defines details of an element
<dfn>	Defines a definition term
<dir>	Not supported in HTML5.
<div>	Defines a section in a document
<dl>	Defines a definition list
<dt>	Defines a definition term
<em>	Defines emphasized text
<embed>New	Defines external interactive content or plugin
<fieldset>	Defines a fieldset
<figcaption>New	Defines the caption of a figure element
<figure>New	Defines a group of media content, and their caption
<font>	Not supported in HTML5.
<footer>New	Defines a footer for a section or page
<form>	Defines a form
<frame>	Not supported in HTML5.
<frameset>	Not supported in HTML5.
<h1> to <h6>	Defines header 1 to header 6
<head>	Defines information about the document
<header>New	Defines a header for a section or page
<hgroup>New	Defines information about a section in a document
<hr>	Defines a horizontal rule
<html>	Defines an html document
<i>	Defines italic text
<iframe>	Defines an inline sub window (frame)
<img>	Defines an image
<input>	Defines an input field
<ins>	Defines inserted text
<keygen>New	Defines a generated key in a form
<kbd>	Defines keyboard text
<label>	Defines a label for a form control
<legend>	Defines a title in a fieldset
<li>	Defines a list item
<link>	Defines a resource reference
<map>	Defines an image map
<mark>New	Defines marked text
<menu>	Defines a menu list
<meta>	Defines meta information
<meter>New	Defines measurement within a predefined range
<nav>New	Defines navigation links
<noframes>	Not supported in HTML5.
<noscript>	Defines a noscript section
<object>	Defines an embedded object
<ol>	Defines an ordered list
<optgroup>	Defines an option group
<option>	Defines an option in a drop-down list
<output>New	Defines some types of output
<p>	Defines a paragraph
<param>	Defines a parameter for an object
<pre>	Defines preformatted text
<progress>New	Defines progress of a task of any kind
<q>	Defines a short quotation
<rp>New	Used in ruby annotations to define what to show browsers that to not support the ruby element.
<rt>New	Defines explanation to ruby annotations.
<ruby>New	Defines ruby annotations
<s>	Defines text that is no longer correct
<samp>	Defines sample computer code
<script>	Defines a script
<section>New	Defines a section
<select>	Defines a selectable list
<small>	Defines small text
<source>New	Defines media resources
<span>	Defines a section in a document
<strike>	Not supported in HTML5.
<strong>	Defines strong text
<style>	Defines a style definition
<sub>	Defines subscripted text
<summary>New	Defines the header of a "detail" element
<sup>	Defines superscripted text
<table>	Defines a table
<tbody>	Defines a table body
<td>	Defines a table cell
<textarea>	Defines a text area
<tfoot>	Defines a table footer
<th>	Defines a table header
<thead>	Defines a table header
<time>New	Defines a date/time
<title>	Defines the document title
<tr>	Defines a table row
<tt>	Not supported in HTML5.
<u>	Not supported in HTML5.
<ul>	Defines an unordered list
<var>	Defines a variable
<video>New	Defines a video
<wbr>New	Defines a possible line-break
<xmp>	Not supported in HTML5.

CSS Tricks