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
| ||||||||||||||||||
@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... :)
|
Wednesday 26 June 2013
CSS3 Web fonts
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:
HTML 4.01:
|
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.
|
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,
|
Find out if you browser supports HTML5 or not
HTML5 is the future of the web so one can start implementing it from now onwards as some of the browsers are compatible with it(not completely). However, while implementing you should take care of those browsers also which are not compatible with HTML5.
The are several ways to detect whether your browser supports HTML5 element or not.
The easiest way to do so is to use “Modernizr”. It is an open source , MIT Licensed Javascript library that detects support for many HTML5 and CSS3 features. You can download it from here
|
Using Modernizr to detect HTML5 Elements is very simple. In the head part we have to insert this
<script src="modernizr.min.js"></script>
It will create a global object called “Modernizr” which contain some boolean properties for each feature it can detect.
For example if we want to detect Canvas element
if (Modernizr.canvas) {
// Canvas support available
}
else {
// Canvas support not available
}
You can refer to http://www.modernizr.com/ for the list of features that Modernizr supports.
2.If the feature you want to detect is not in the list then you can do something like this
function isCanvasSupport() {
return !!document.createElement('canvas').getContext; }
It will create a dummy canvas element after that it will check for getContext() method this method will only exist if your browser supports the canvas API The double negation sign (!!) will force the result to boolean
3. There is one more way to do the same in a way it is the exact replica of the above
var supportCanvas = 'getContext' in document.createElement('canvas');
if(supportCanvas) {
//Do Something
}
else {
//Do something
}
You can use any of the above mention methods. These will be helpful for fixing compatibility issues as currently only few browsers are compatible with HTML5.
Reference : http://www.mindfiresolutions.com
Good Luck.. :)
|
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...
|
Saturday 22 June 2013
Tips to use jQuery selectors efficiently
It is pretty important to understand how to write efficient element selection statement. One has to be very careful while jquery selector statement. Below are some tips on how to use your jQuery selectors efficiently.
1. Always try to use ID as selector
You can use ID as selector in jQuery. See below jQuery code.
When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element.
When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.
2. Use class selector with tags
You can use CSS classes as selector. For example, to select elements with "myCSSClass" following jQuery code can be used.
As said earlier, when classes are used DOM traversal happens. But there could be a situation where you need to use classes as selector. For better performance, you can use tag name with the class name. See below
Above jQuery code, restricts the search element specific to DIV elements only.
3. Keep your selector simple, don't make it complex
Avoid complex selectors. You should use make your selectors simple, unless required.
Instead of using such a complex selector, we can simplify it. See below.
4. Don't use your selector repeatedly.
See below jQuery code. The selectors are used thrice for 3 different operation.
The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into a single statement.
5. Know how your selectors are executed
Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".
1. Always try to use ID as selector
You can use ID as selector in jQuery. See below jQuery code.
1 | $("#elmID"); |
When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.
2. Use class selector with tags
You can use CSS classes as selector. For example, to select elements with "myCSSClass" following jQuery code can be used.
1 | $(".myCSSClass"); |
1 | $("div.myCSSClass"); |
3. Keep your selector simple, don't make it complex
Avoid complex selectors. You should use make your selectors simple, unless required.
1 | $("body .main p#myID em"); |
1 | $("p#myID em"); |
4. Don't use your selector repeatedly.
See below jQuery code. The selectors are used thrice for 3 different operation.
1 | $("#myID").css("color", "red"); |
2 | $("#myID").css("font", "Arial"); |
3 | $("#myID").text("Error occurred!"); |
1 | $("p").css({ "color": "red", "font": "Arial"}).text("Error occurred!"); |
5. Know how your selectors are executed
Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".
Subscribe to:
Posts (Atom)