Tag Archives: Browser

Use HTML5 On Your Website

Detect HTML5 usage

If you want to see that a website is using HTML5 elements or not, you only need to view the source of the website.
If the source code starts with the following declaration.

<!DOCTYPE HTML>

Then, website was marked up with HTML5.

By using the HTML5 DocType, you can let the browser know what to expect from your document.HTML4 required a DocType reference to a DTD (doc type declaration), and there were three different DTD’s that could be used but HTML5 doesn’t require such a reference.

 

Remove Internet Explorer HTML5 Compatibility Issues

Microsoft IE9 supports HTML5, but there are still so many people using MSIE 7 and 8 and even MSIE 6.Add below HTML5 enabling script to allow developers to use any HTML5 element on their page. It should place within the <HEAD> tags, and is referenced like this:

 

<!–[if lt IE 9]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

 

HTML5 Element Detection Techniques

When browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. Every html element is represented in the DOM by a different object. (There are also global objects, like window and document, that aren’t tied to specific elements.)

All DOM objects share a set of common properties, but some objects have more than others. In browsers that support HTML5 features, certain objects will have unique properties. Let’s discuss, which features are supported.

There are four basic techniques can be used to detect whether a browser supports a particular feature or not.

1.Check if a certain property exists on a global object (such as window or navigator).
E.g: test for geolocation support

 

2.Create an element, and then check if a certain property exists on that element.
E.g: test for canvas support

 

3.Create an element, check if a certain method exists on that element, then call the method and check the value it returns.
E.g: test which video formats are supported

 

4.Create an element, set a property to a certain value, and then check if the property has retained its value.
E.g: test which <input> types are supported

 

Modernizr can be used to detect these easily as
Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. You should always use the latest version of this. To use it, include the following <script> element at the top of your page.
<script src=”modernizr.min.js”></script>

 

HTML5 Form Enhancements (New elements)

Autofocus Using HTML5
<input id=”example” name=”example” type=”text” autofocus />

Placeholders Using HTML5
<input id=”example1″ name=”example1″ type=”text” placeholder=”Your Text” />

Editable Content Using HTML5’s contenteditable
<p contenteditable=”true”>Put your mouse pointer in this text and you can update it!</p>

Also, it has also introduced some new elements as below:

<article>
<aside>
<audio>
<canvas>
<command>
<datagrid>
<details>
<dialog>
<figure>
<footer>
<header>
<m>
<meter>
<nav>
<output>
<progress>
<section>
<source>
<time>
<video>

 

HTML5 also defines new input types that you can use in your forms.

<input type=”search”> for search box
<input type=”date”> for calendar date picker
<input type=”month”> for month
<input type=”week”> for week
<input type=”time”> for timestamp
<input type=”datetime”> for precise, absolute date+time stamp
<input type=”datetime-local”> for local dates and time
<input type=”number”> for spinbox
<input type=”range”> for slider
<input type=”color”> for color picker
<input type=”tel”> for telephone number
<input type=”url”> for web address
<input type=”email”> for email address

 

Google’s Chrome is biggest gainer with respect to IE & Firefox in Browser Wars

Top 5 most popular internet web browsers

A large number of people use the browser that comes with their computer’s operating system.

 

Internet Explorer on Windows
Safari on the Mac
Firefox on Linux

 

Apart from these Microsoft’s Internet Explorer is still the world’s most popular browser, but (IE) and Mozilla’s Firefox lost a lot of market share(users) to Google’s Chrome in 2011, which is now in second place.

According to StatCounter’s 2011 data (see image below), IE currently has a 39% market share, Chrome is at 27%, while Firefox holds 25% of the market.

2011 Browser Usage Statistics

Safari and Opera follow with 6% and 2% market share, respectively.

Internet Explorer started 2011 with a 46% share of the market, and Firefox was over 30%. Both browsers steadily lost their share throughout the year, and almost all of it went to Google Chrome, which is clearly the year’s biggest gainer.

 

HTML5 Features & How HTML5 helpful On Web Development?

HTML5 is the latest version of HTML and XHTML or simply it is a new standard for HTML, XHTML, and the HTML DOM.
The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous version of HTML and addresses the needs of Web App(new attributes and tags), an area previously not covered.

 

HTML5 work is still in progress or we can say it is just a Draft.However, most modern browsers have some HTML5 support(no browser have full support).

But all major browsers (Firefox, Safari, Chrome, Opera, IE) continue to add new HTML5 features to their latest versions.

 

There are some new attributes added in HTML5 and some useless attributes has been removed.

 

The attractive things behind HTML5 are.

* New Elements (Semantic Elements as headers, footers, menus, sections, articles)

* New Attributes (Shadow Effects, Rounded Corners, Animations)

* Full CSS3 Support

* Video and Audio (tags <video>, <audio>)

* 2D/3D Graphics (tag <canvas>)

* Local Storage (local file access, application cache, JavaScript)

* Local SQL Database

* Web Applications

 
 
Benefits of HTML5
 

1.Reduce the need for external plugins (like Flash)

2.Better error handling (some in build validation attributes added)

3.More mark-up to replace scripting(new tags has been added)

4.HTML5 should be device independent(uniform on mobile, web, notebook, tablet PC)

5.The development process should be visible to the public.

Drawback of HTML5

 

1.Currently, No browser supports HTML5 fully.

 

Cross Browser Web Fonts Using @font-face support

Best way to use custom fonts on your site

cross browser web fonts

 

If you use custom font in your website using @font-face,then it may possible that it will not display fine in some browsers.

 

This is due to the font-face browser dependency (every browser supports @font-face slightly differently).

 

for resolving the cross browser web fonts we have to use different font file for different browser.

 

Here is the link from where we can get a complete kit of a font files.

font-face Kit Generator
http://www.fontsquirrel.com/fontface/generator

 

It is very simple to use.
Upload your font file (generally with .ttf extension) with [+Add Fonts] button.
Select your option and check agreement check box.
Click on [Download your kit] button.

 

Here you will get a prepared zip file for the same.
Download that and use according to your need.

 

Put font file in a folder, give the path of the same in css file.
Use the css and you will found the same result,you want to get.

 

You also found a specimen/example to use the font-face in the kit.

 

Basic web fonts syntax

The @font-face rule

 

First you insert a block in your CSS, describing a web font you want to embed into your page. This information is all wrapped inside a @font-face block

@font-face {
  font-family: 'Abril Fatface Regular';
  src: url("AbrilFatface-Regular.otf");
}

 

Standard font-family declaration

 

h1 {
font-size: 8em;
font-family: 'Abril Fatface Regular', sans-serif;
}

 

Other @font-face options

 

@font-face {
font-family: 'Abril Fatface';
src: url("AbrilFatface.otf");
font-weight: bold;
font-stretch: condensed;
unicode-range: U+0026;
}

 

If you want to know why all this works as above, follow Paul Irish’s Bulletproof @font-face syntax.

 

Importance and Benefits of PHP Output Buffering & how can I set it?

PHP sends data from server to client/browser as soon as it is ready – this response might be line by line or by code blocks.Output buffering enables you to store up your output and send it when you are ready to go or to not send it at all, if you decide.

 

or simple

 

Output buffering puts your PHP script’s output/response in a buffer instead of sending it directly to the browser in pieces, allowing you to update your webpage as a whole before the user see.

 

1.Start Output Buffer

You have to start the output buffer before anything is sent to the browser.So one of the ways to ensure that is starting it right after you opened the php tag.

 

2.Send Output Buffer to Browser

If at any time you wish to send the content of the buffer to the browser you can do simply by the following line.
ob_flush();

After this point however the output buffer will continue to buffer the content which is send to the browser.
If you which to simply send the content of the buffer and stop using it you can do this with the following code.

ob_end_flush();

 

3.Delete Output Buffer

In some circumtances you might wish to delete whatever is stored in the output buffer.You can do this by using the following command.
ob_clean();

 

4.Get Output Buffer Content

If you started the output buffer you can get the content of it at any time (unless you have deleted it or sent it to the browser.This is done by the following line

<?php $myvar = ob_get_contents();?>

This means that everything you echo or would be sent otherwise to the browser between this line and the ob_start(); will now be in $myvar.

Here is small example of output buffering

<?php
ob_start();
include('tpl_scriptarticle.php');
$title = 'Hello All';
$myvar = ob_get_contents();
ob_clean();
echo $myvar;
?>

There are some more function , you can get more by this link click here