CSS3 Web fonts

Q:What is web fonts? Ans:The term Web fonts generally refers to the use of @font-face.Font-face allows us to specify which fonts are used within our sites. Q:What is the advantage of Web fonts? Ans:It eliminates the complicated workaround for designers. History of font face @font-face was part of css2 specification but it was dropped in css2.1 specification. But again it introduced in CSS3 specification. Browser support for @font-face Browser Name font-face support format supported IE 4+ Yes eot Mozilla Firefox 3.5+ Yes woff Chrome 4+ Yes ttf,off Opera 10+ Yes ttf,otf,svg Safari 4+ Yes ttf,otf

@font-face Syntax @font-face   {     font-family:'fontfamilyname';     src:url('../Folder wherefonts are stored/downloadedfont.eot'); /*For IE*/     src:local('?'),url('../Folder wherefonts are stored/downloadedfont.woff')format('woff'),         url('../Folder wherefonts are stored/downloadedfont.ttf')format('truetype'),         url('../Folder wherefonts are stored/downloadedfont.svg#webfont4CzPTNtF')format('svg');     font-weight:normal;     font-style:normal; }     Q;How to use ? Ans:It can be uses as a normal syntax for font-family; eg.         body         {             background: #fff;             color: #000;             font-family:fontfamilyname;             margin: 40px 0;         } Good Luck... :)

Role of in HTML

In HTML document from very first line we can notice one tag i.e <!DOCTYPE…< This is not a HTML tag. This doctype refers to a Document Type Declaration(DTD).Most of the time we don't bother for such tag. In HTML programming we use different versions of HTML like HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict etc. All these are defined in a machine-readable language taking the legal structure, elements and attributes. This is nothing but the job of DTD to categorise all version of HTML according to version definitions specified on W3c standard. As Web Accessibility has a key role in web development so this doctype inclusion is nothing but an addition. <!DOCTYPES are also essential for rendering and functioning of web documents in compliant browsers..       There are few examples given below regarding the tags and it's properties.

Examples: XHTML 1.0:    1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This DTD contains all HTML elements and attributes. Framesets are not allowed. The markup must also be written as well-formed XML. 2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> This DTD is used when a webpage follows basic XHTML rules and uses some HTML presentational tags for user convenience but doesn't support CSS. 3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> This DTD is same as Transitional DTD  except the use of <frameset> tag over <body> HTML 4.01:     1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> This DTD excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Transitional DTD allows some older elements and attributes that have been deprecated.3.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> This declares the document to be HTML 4.01 Frameset. HTML 4 Frameset is a variant of HTML 4 Transitional for documents that use frames             In order to get list of DTDs you can follow http://www.w3.org/QA/2002/04/valid-dtd-list.html. Thanks, Rajasekhar.

CSS Hack: Using images with space character in file name

For us the following two file names may not hold much difference but when using CSS we have to take care of the space between the file names. 1. Page background.jpg 2. Page_background.jpg For instance, to set a background image of a page using CSS we would have to add the following two lines of code - background:#F7F9fa url(../Images/Page background.jpg); background-repeat:repeat-x; The above code would run fine on Internet Explorer but not on Firefox or Safari.  The reason is the space character in the file name.

So to be in safe side you can use some work around for it. Enclose with qoute(')  background:#F7F9fa url('../Images/Page background.jpg'); Using Encode charecterbackground:#F7F9fa url('../Images/Page%20background.jpg' Thanks, Rajasekhar.

How To Attach Events To HTML Elements Created Dynamically

In one of my recent applications I had to use a jQuery plugin which need to run when the HTML <li> elements are ready. This plugin creates fancy tool tips for HTML elements having title attribute.   The <li> elements were created and appended dynamically to document body, by javascript. So I found that the plugin is not recognizing the title attributes of the li elements. I made use of document.ready, li.ready etc. to run the plugin, but non of them worked for me.   So after making a good search I found one jQuery event handler called live(). This method can help in attaching events to any HTML element, whether it is created dynamically or not. So if you are setting any event to any element/ selector, then it is automatically attached to that particular selector/element in future also, if they are created dynamically.

Syntax: .live( events, handler(eventObject) ) Example: $("li").live("onmouseover",function(){    //do your stuffs }); This has different versions per different plugins. $(selector).live(events, data, handler);                // jQuery 1.3+ $(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+ $(document).on(events, selector, data, handler);        // jQuery 1.7+ Thanks,

CSS hack for Safari Browser

In the current situation it's a challenging task for the web developers to build websites which is compatible with different and popular browsers available (like IE, Firefox, Mozilla, Safari, Google Crome, Opera etc...) Different browsers have their different ways of serving the web page content and may create problem while using some CSS properties to get a desired output. To avoid these kinds of problems there is are solutions which are called "CSS hacks" and which are also different for different browsers. Using CSS hack is not recommended as per the W3C validation rules but in some cases we have to use them to get our task done. I knew about CSS hack for IE, Firefox but I came across CSS hack for Safari which I was not aware of and as Safari is one of the mostly used browser in world so I think this information might help others as well to overcome from these kind of browser compatibility issues. While working on one of my projects I faced a problem where Safari browser was not supporting one of CSS properties and was distrorting the layout, however, it was worknig fine in IE and Firefox. To fix this I had to use a CSS hack for Safari. Here is an simple example which you can test quickly and see the difference.   - Create an HTML file and name as you want, then copy and paste the following code to your file: <html>     <head>         <title>Safari CSS Hack Example</title>         <style type="text/css">             body {                 background-color: #FF00FF;                 font-family:Arial, Helvetica, sans-serif;                 color: #fff;                 font-size:14px;                 font-weight:bold;             }             @media screen and (-webkit-min-device-pixel-ratio:0) {body {background-color: #FF6500;}}         </style>     </head>     <body>         <p>             The page background will show orange in Safari 3+, Chrome and Opera (< 9.5) browsers. In all other browsers it should show pink.        </p>     </body> </html>

- Now try opening the file in Firefox/IE and Safari and see the difference. The page background is different in Safari from the background shown in IE.   If you look in web for CSS hack for Safari then you might find different ways like using body:nth-of-type(1) or body:first-of-type which can be used to apply specific CSS property for Safari but these properties are also supported by Firefox 3.5x.   So here the CSS hack I have used is "@media screen and (-webkit-min-device-pixel-ratio:0) " and here are the few stpes how to use it: - You don't need write your entire class inside "@media screen and (-webkit-min-device-pixel-ratio:0){}". As shown in the above example you can just write the required property that you want to apply for Safari. In the above example from the all of the CSS properties of body I want to only change the background-color for Safari so I just specified the CSS classname/ID and the property with different values. - I also noticed one more limitation which you might need to be careful while using this is the way it is written needs to stay like this which means your new property needs to be written in between "@media screen and (-webkit-min-device-pixel-ratio:0){}" but if you are using any code minifier to minify your CSS file then it will try to remove the extra spaces used which will create problem and this property will not be effective. Reference : http://www.mindfiresolutions.com Good Luck...