Detect Safari using JS

Safari and Chrome both are Webkit based browsers. There are two methods to detect Safari browser using JavaScript

Methode 1 :

var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_safari = navigator.userAgent.indexOf("Safari") > -1;
var is_Opera = navigator.userAgent.indexOf("Presto") > -1;
if ((is_chrome)&&(is_safari)) {
  is_safari=false;
}
if (is_safari) {
  console.log('Safari');
}

Methode 2 ( Safari Only ) :

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
    console.log('Its Safari');
}

Code Organization In jQuery

Object literal for a jQuery

  1. This Methode Broken the tiny Methods. but in Future this step is easy to locate where we want to change.
  2. Eliminated the use of anonymous functions.
  3. Easier to debug, maintain, test, or reuse
var Loader = {
 
    init: function() {
        $( "#bodyId01" ).click( Loader.functionA);
        $( "#bodyId02" ).load(url, Loader.functionC);
    },
 
    functionA: function( event ) {
        $( "#bodyId03" ).fadeIn( Loader.functionB);
    },
 
    functionB: function() { ... },
 
    functionC: function() { ... }
 
};
 
$( document ).ready( Loader.init);

How to size text using em’s

  1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
  2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
  3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
  4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

Continue reading

CSS Practices

Use a browser reset

One of the most common mistakes that designers fall victim to when it comes to CSS is not resetting their browser defaults. This leads to inconsistencies in the appearance of your desing across different browsers. So before doing anything else, when coding a website, you should reset the styling. You can use a simple reset with the universal selector like this

Continue reading