Clickjacking, Forgery and Phishing

CLICKJACKING

Clickjacking (User Interface redress attack, UI redress attack, UI redressing) is a malicious technique of tricking a Web user into clicking on something different from what the user perceives they are clicking on, thus potentially revealing confidential information or Black-Hat-Hackerstaking control of their computer while clicking on seemingly innocuous web pages. A clickjack takes the form of embedded code or a script that can execute without the user’s knowledge, such as clicking on a button that appears to perform another function.

How clickjacking works:
A user searches for a website, for eg: Amazon.com. The listed URL may contains some dummy URL. Once the user clicks on this URL the hacker opens the actual www. Amazon.com in an iFrame. And hence the user is tricked into believing that it is the actual site. Here he clicks on any button for eg: Submit Bank Details. This button will be masked by an invisible button which will redirect the user to the hackers web page and the user will unknowingly type in all the details and this will be captured by the hacker.

Proposed Fix:
To fix this issue execute a set of code which will check if the URL in the iFrame is same as the URL on the browser i.e self==top. If yes, then continue else the URL in the iFrame will replace the browser URL and hence the user will be redirected to the authentic website.
First apply an ID to the style element itself:

<style id="antiClickjack">body{display:none !important;}</style>

And then delete that style by its ID immediately after in the script:

if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}

Cross-site request FORGERY(CSRF)

Cross-site request forgery abbreviated as CSRF (sometimes pronounced sea-surf) or XSRF, is a type of malicious exploit, ie CSRF is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated. CSRF attacks specifically target state-changing requests, not theft of data, since the attacker has no way to see the response to the forged request. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker’s choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.

How CSRF works:
A simple example is, if a bank for eg: bank.com uses the below URL for transferring money to a particular user named ABC.

 http://bank.com/transfer.do?acct=ABC&amount=100000

A hacker can send an html email with the below link as some promotional campaign,

 <a href="“http://bank.com/transfer.do?acct=ABC&amount=100000"">View my Pictures!</a>

Once the user unknowingly clicks on this link, the amount gets transferred.

Proposed Fix:

  • Include a hidden form field on all forms of your site which are required when a user is logged in.
  • Include this form field or token value in the users session variables, so that they have a copy.
  • After every POST or GET evaluation you want to protect, make sure that the token from the browser (session) matches the token from the form (GET/POST value) If they do not match, then the page may have been submitted fraudulently (XSRF)
  • The token may be generated new for each form and stored server side or in a database.

PHISHING referrer trust

In phishing attacks, a hacker creates a website that resembles a victim web’s application. The fake website often reuses pages and images from the original website to seem authentic. Pages from the original site may be embedded in frames in the phishing site. The fake website can thus capture form information sent by users and forward the data to the authentic website.

How Phishing referrer trust works:
The HTTP Referrer field is a browser-passed value in an HTTP header meant to provide a basic means for logging and tracking the origin of HTTP requests. Web servers can be configured to allow requests originating only from specific sites based on the HTTP Referrer field. Some sites use the values of this variable as a part of their access-control measures. Check for HTTP Referrer allows a web server to add a barrier for attacks such as Cross-Site Request Forgery (CSRF).

Proposed Fix:
Always check for difference between the referrer domain and the current domain. If it is different, the user will be redirected to access denied page.

Advertisements

Internet Explorer 11: “Don’t call me IE”

internet-ExplorerWith Internet Explorer 11, you get better compatibility with web standards, other browsers, and real-world websites. There’s updated support for popular web standards and changes that prevent older websites from displaying incorrectly.
For the first time in a long time, Microsoft has actually removed features from Internet Explorer. The user-agent string has also changed. It seems that Microsoft has gone out of their way to ensure that all existing isIE() code branches, whether in JavaScript or on the server, will return false for Internet Explorer 11. The optimistic view of this change is that Internet Explorer 11 finally supports enough web standards such that existing IE-specific behavior is no longer needed.

User-agent changes
The user-agent string for Internet Explorer 11 is shorter than previous versions and has some interesting changes.

IE 11 user-agent string:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko
IE 10 user-agent string (on Windows 7):
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/6.0)

The compatible ("compatible") and browser ("MSIE") tokens have been removed.
The "like Gecko" token has been added (for consistency with other browsers).
The version of the browser is now reported by a new revision ("rv") token.

The most glaring difference is the removal of the “MSIE” token, which has been part of the Internet Explorer user-agent from the beginning. Also noticeable is the addition of “like Gecko” at the end. This suggests that Internet Explorer would prefer to be identified as a Gecko-type browser if it’s not identified as itself. Safari was the first browser to add “like Gecko” so that anyone sniffing for “Gecko” in the user-agent string would allow the browser through.

Any sniffing code that looks for “MSIE” now will not work with the new user-agent string. You can still search for “Trident” to identify that it’s Internet Explorer (the “Trident” token was introduced with Internet Explorer 9). The true Internet Explorer version now comes via the “rv” token.

Legacy API additions, changes, and removals
Many websites look for browsers that support legacy (HTML4) features in order serve experiences optimized for earlier browsers. This can be a problem for browsers that support legacy features and modern standards, such as HTML5, CSS3, and so on. If a site detects legacy features before searching for modern standard support, it can serve legacy experiences to browsers that support modern standards and richer experiences.
As a result, IE11 adds, changes, and removes a number of legacy features by default:

=> The navigator.appName property now returns “Netscape” to reflect the HTML5 standard and to match behavior of other browsers.
=> The navigator.product property now returns “Gecko” in order to reflect the HTML5 standard and to match behavior of other browsers.
(This may seem like a sneaky attempt to trick developers, but this behavior is actually specified in HTML5. The navigator.product property must be “Gecko” and navigator.appName should be either “Netscape” or something more specific. Strange recommendations, but Internet Explorer 11 follows them. The side effect of these navigator changes is that JavaScript-based logic for browser detection may end up using these and will end up identifying Internet Explorer 11 as a Gecko-based browser)
=> The XDomainRequest object is replaced by CORS for XMLHttpRequest.
=> Supported for __proto__ has been added.
=> The dataset property has been added.
In addition, several legacy API features have been removed in favor of features specified by modern standards:

Removed API feature                   Replacement feature
============================================================
attachEvent                                     addEventListener
——————————————————————————————————-
window.execScript                           eval
——————————————————————————————————-
window.doScroll                               window.scrollLeft, window.scrollTop
——————————————————————————————————-
document.all                                    document.getElementById
——————————————————————————————————-
document.fileSize, img.fileSize         Use XMLHttpRequest to fetch the  source
——————————————————————————————————-
script.onreadystatechange              script.onload
& script.readyState
——————————————————————————————————-
document.selection                         window.getSelection
——————————————————————————————————-
document.createStyleSheet            dcument.createElement (“style”)                                                                               style.styleSheet style.sheet
——————————————————————————————————-
window.createPopup                       Use div or iframe with a high zIndex value
——————————————————————————————————-
Binary behaviors                             Varies; use a standards-based                                                                                equivalent,ie canvas, SVG, or CSS3                                                                        Animations
——————————————————————————————————-
Legacy data binding                       Use data binding from a framework, such                                                                 as WinJS
============================================================

URL character encoding
IE11 changes the character encoding for URLs. Specifically, query strings and XHR requests are now encoded using UTF-8 character encoding.
This change affects all URLs except for:

anchor name components (also called fragments).
username and password components.
file:// or ftp:// protocol links.

These changes match the behavior of other browsers and simplifies cross-browser XHR code.

Custom data attributes
IE11 adds support for HTML5 custom data attributes and the dataset property, which provides programmatic access to them. You can assign data attributes to elements using a data- prefix followed by the attribute name(HTML):

 <div data-example-data="Some data here"></div>

To get or set the value of the data attribute, use this syntax(JavaScript):

   // to get
   var myData = element.dataset.exampleData;
   // to set
   element.dataset.exampleData = "something new";

Ref: http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx
Ref: http://www.nczonline.net/blog/2013/07/02/internet-explorer-11-dont-call-me-ie/

Author : Rony T Sam

Difference between & and && or | and || in c#

Logic

We know that a single | or & is a bitwise comparison.The double || or && is a logical comparison. More than this, these operators have another meaning.

&& or || Known as short-circuit-AND/OR logical operator
& or | Known as regular-AND/OR operator

Short-circuit-AND/OR logical operator
The && and || operators, which are the short-circuiting logical operators, are only defined for the type Boolean. Because of their short circuiting behavior, the second operand is not evaluated at run time if the operator result is known after evaluating the first operand.
The short-circuiting logical operators are evaluated as follows:
x && y
If the first operand in an && operation evaluates to False, the expression returns False. (because the result of the AND operation is false no matter what the value of y may be). Otherwise, the second operand is evaluated and a logical And operation is performed on the two results.
x || y
If the first operand in an || operation evaluates to True, the expression returns True. (because the result of the OR operation is false no matter what the value of y may be). Otherwise, the second operand is evaluated and a logical Or operation is performed on its two results.
When evaluating the && or || operators, the first operand is evaluated only once, and the second operand is either not evaluated or evaluated exactly once.

Regular-AND/OR operator
‘&’ and ‘|’ are more common for them to be used as bitwise operators, but can also be used as logical operators though. When they’re used as logical operators, both operands are always evaluated.

For example, consider the following code:

// cs_operator_logical_and.cs
 using System;
 class Test
 {
 static bool fn1()
 {
 Console.WriteLine("fn1 is false");
 return false;
 }
static bool fn2()
 {
 Console.WriteLine("fn2 is true");
 return true;
 }
public static void Main()
 {
 Console.WriteLine("regular AND:");
 bool regAnd = (fn1() & fn2());
 Console.WriteLine("result is {0}",regAnd);
 Console.WriteLine();
 Console.WriteLine("short-circuit AND:");
 bool sctAnd = (fn1() && fn2());
 Console.WriteLine("result is {0}",sctAnd);
 }
 }

Output will be

regular AND:
 fn1 is false
 fn2 is true
 result is False
short-circuit AND:
 fn1 is false
 result is False

Author : Rony T Sam

What is MongoDB?

images

MongoDB is a cross-platform document-oriented database system. Classified as a “NoSQL” database, MongoDB eschews the traditional table-based relational database structure in favor of JSON-like documents with dynamic schemas (MongoDB calls the format BSON), making the integration of data in certain types of applications easier and faster. Released under a combination of the GNU Affero General Public License and the Apache License, MongoDB is free and open source software.
First developed by the New York City-based company 10gen (now MongoDB Inc.) in October 2007 as a component of a planned platform as a service product, the company shifted to an open source development model in 2009, with 10gen offering commercial support and other services.Since then, MongoDB has been adopted as backend software by a number of major websites and services, including Craigslist, eBay, Foursquare, SourceForge, and The New York Times, among others. MongoDB is the most popular NoSQL database system.

mongodb_stackMain features

The following is a brief summary of some of the main features:

Ad hoc queries
MongoDB supports search by field, range queries, regular expression searches. Queries can return specific fields of documents and also include user-defined JavaScript functions.

Indexing
Any field in a MongoDB document can be indexed (indices in MongoDB are conceptually similar to those in RDBMSes). Secondary indices are also available.

Replication
MongoDB supports master-slave replication. A master can perform reads and writes. A slave copies data from the master and can only be used for reads or backup (not writes). The slaves have the ability to select a new master if the current one goes down.

Load balancing
MongoDB scales horizontally using sharding. The developer chooses a shard key, which determines how the data in a collection will be distributed. The data is split into ranges (based on the shard key) and distributed across multiple shards. (A shard is a master with one or more slaves.)
MongoDB can run over multiple servers, balancing the load and/or duplicating data to keep the system up and running in case of hardware failure. Automatic configuration is easy to deploy, and new machines can be added to a running database.

File storage
MongoDB could be used as a file system, taking advantage of load balancing and data replication features over multiple machines for storing files. This function, called GridFS,is included with MongoDB drivers and available with no difficulty for development languages (see “Language Support” for a list of supported languages). MongoDB exposes functions for file manipulation and content to developers. GridFS is used, for example, in plugins for NGINX and lighttpd.

In a multi-machine MongoDB system, files can be distributed and copied multiple times between machines transparently, thus effectively creating a load balanced and fault tolerant system.

Aggregation
MapReduce can be used for batch processing of data and aggregation operations. The aggregation framework enables users to obtain the kind of results for which the SQL GROUP BY clause is used.
Server-side JavaScript execution
JavaScript can be used in queries, aggregation functions (such as MapReduce), are sent directly to the database to be executed.

Capped collections
MongoDB supports fixed-size collections called capped collections. This type of collection maintains insertion order and, once the specified size has been reached, behaves like a circular queue.

Main drawbacks

The following is a brief summary of some of the main drawbacks:

Database-level locking
MongoDB locks an entire database for each write, restricting concurrency.

Non-durable un-verifiable writes
MongoDB returns when not even data is securely written to non-volatile storage. Prior to version 2.2 it did not even wait for the data to be written to any server.

Scalability issues
It has scalability issues for more than 100GB of data.

Language support
MongoDB has official drivers for a variety of popular programming languages and development environments.Web programming language Opa also has built-in support for MongoDB, which is tightly integrated in the language and offers a type-safety layer on top of MongoDB.There are also a large number of unofficial or community-supported drivers for other programming languages and frameworks.

Read More: https://www.mongodb.com/products/mongodb

Source: Wikipedia                   Post by: Aneesh Sivan

What is NoSQL?

nosql_logo_0

A NoSQL database provides a mechanism for storage and retrieval of data that employs less constrained consistency models than traditional relational databases. Motivations for this approach include simplicity of design, horizontal scaling and finer control over availability. NoSQL databases are often highly optimized key–value stores intended for simple retrieval and appending operations, with the goal being significant performance benefits in terms of latency and throughput. NoSQL databases are finding significant and growing industry use in big data and real-time web applications. NoSQL systems are also referred to as “Not only SQL” to emphasize that they may in fact allow SQL-like query languages to be used.

NoSQL Database Types

  • Document databases pair each key with a complex data structure known as a document. Documents can contain many different key-value pairs, or key-array pairs, or even nested documents.
  • Graph stores are used to store information about networks, such as social connections. Graph stores include Neo4J and HyperGraphDB.
  • Key-value stores are the simplest NoSQL databases. Every single item in the database is stored as an attribute name (or “key”), together with its value. Examples of key-value stores are Riak and Voldemort. Some key-value stores, such as Redis, allow each value to have a type, such as “integer”, which adds functionality.
  • Wide-column stores such as Cassandra and HBase are optimized for queries over large datasets, and store columns of data together, instead of rows.

The Benefits of NoSQL

When compared to relational databases, NoSQL databases are more scalable and provide superior performance, and their data model addresses several issues that the relational model is not designed to address:

  • Large volumes of structured, semi-structured, and unstructured data
  • Agile sprints, quick iteration, and frequent code pushes
  • Object-oriented programming that is easy to use and flexible
  • Efficient, scale-out architecture instead of expensive, monolithic architecture

Dynamic Schemas

Relational databases require that schemas be defined before you can add data. For example, you might want to store data about your customers such as phone numbers, first and last name, address, city and state – a SQL database needs to know what you are storing in advance.

This fits poorly with agile development approaches, because each time you complete new features, the schema of your database often needs to change. So if you decide, a few iterations into development, that you’d like to store customers’ favorite items in addition to their addresses and phone numbers, you’ll need to add that column to the database, and then migrate the entire database to the new schema.

If the database is large, this is a very slow process that involves significant downtime. If you are frequently changing the data your application stores – because you are iterating rapidly – this downtime may also be frequent. There’s also no way, using a relational database, to effectively address data that’s completely unstructured or unknown in advance.

NoSQL databases are built to allow the insertion of data without a predefined schema. That makes it easy to make significant application changes in real-time, without worrying about service interruptions – which means development is faster, code integration is more reliable, and less database administrator time is needed.

Auto-sharding

Because of the way they are structured, relational databases usually scale vertically – a single server has to host the entire database to ensure reliability and continuous availability of data. This gets expensive quickly, places limits on scale, and creates a relatively small number of failure points for database infrastructure. The solution is to scale horizontally, by adding servers instead of concentrating more capacity in a single server.

“Sharding” a database across many server instances can be achieved with SQL databases, but usually is accomplished through SANs and other complex arrangements for making hardware act as a single server. Because the database does not provide this ability natively, development teams take on the work of deploying multiple relational databases across a number of machines. Data is stored in each database instance autonomously. Application code is developed to distribute the data, distribute queries, and aggregate the results of data across all of the database instances. Additional code must be developed to handle resource failures, to perform joins across the different databases, for data rebalancing, replication, and other requirements. Furthermore, many benefits of the relational database, such as transactional integrity, are compromised or eliminated when employing manual sharding.

NoSQL databases, on the other hand, usually support auto-sharding, meaning that they natively and automatically spread data across an arbitrary number of servers, without requiring the application to even be aware of the composition of the server pool. Data and query load are automatically balanced across servers, and when a server goes down, it can be quickly and transparently replaced with no application disruption.

Cloud computing makes this significantly easier, with providers such as Amazon Web Services providing virtually unlimited capacity on demand, and taking care of all the necessary database administration tasks. Developers no longer need to construct complex, expensive platforms to support their applications, and can concentrate on writing application code. Commodity servers can provide the same processing and storage capabilities as a single high-end server for a fraction of the price.

Replication

Most NoSQL databases also support automatic replication, meaning that you get high availability and disaster recovery without involving separate applications to manage these tasks. The storage environment is essentially virtualized from the developer’s perspective.

Integrated Caching

A number of products provide a caching tier for SQL database systems. These systems can improve read performance substantially, but they do not improve write performance, and they add complexity to system deployments. If your application is dominated by reads then a distributed cache should probably be considered, but if your application is dominated by writes or if you have a relatively even mix of reads and writes, then a distributed cache may not improve the overall experience of your end users.

Many NoSQL database technologies have excellent integrated caching capabilities, keeping frequently-used data in system memory as much as possible and removing the need for a separate caching layer that must be maintained.

NoSQL vs. SQL Summary

SQL Databases NoSQL Databases
Types One type (SQL database) with minor variations Many different types including key-value stores, document databases, wide-column stores, and graph databases
Development History Developed in 1970s to deal with first wave of data storage applications Developed in 2000s to deal with limitations of SQL databases, particularly concerning scale, replication and unstructured data storage
Examples MySQL, Postgres, Oracle Database MongoDB, Cassandra, HBase, Neo4j
Data Storage Model Individual records (e.g., “employees”) are stored as rows in tables, with each column storing a specific piece of data about that record (e.g., “manager,” “date hired,” etc.), much like a spreadsheet. Separate data types are stored in separate tables, and then joined together when more complex queries are executed. For example, “offices” might be stored in one table, and “employees” in another. When a user wants to find the work address of an employee, the database engine joins the “employee” and “office” tables together to get all the information necessary. Varies based on database type. For example, key-value stores function similarly to SQL databases, but have only two columns (“key” and “value”), with more complex information sometimes stored within the “value” columns. Document databases do away with the table-and-row model altogether, storing all relevant data together in single “document” in JSON, XML, or another format, which can nest values hierarchically.
Schemas Structure and data types are fixed in advance. To store information about a new data item, the entire database must be altered, during which time the database must be taken offline. Typically dynamic. Records can add new information on the fly, and unlike SQL table rows, dissimilar data can be stored together as necessary. For some databases (e.g., wide-column stores), it is somewhat more challenging to add new fields dynamically.
Scaling Vertically, meaning a single server must be made increasingly powerful in order to deal with increased demand. It is possible to spread SQL databases over many servers, but significant additional engineering is generally required. Horizontally, meaning that to add capacity, a database administrator can simply add more commodity servers or cloud instances. The database automatically spreads data across servers as necessary
Development Model Mix of open-source (e.g., Postgres, MySQL) and closed source (e.g., Oracle Database) Open-source
Supports Transactions Yes, updates can be configured to complete entirely or not at all In certain circumstances and at certain levels (e.g., document level vs. database level)
Data Manipulation Specific language using Select, Insert, and Update statements, e.g. SELECT fields FROM table WHERE… Through object-oriented APIs
Consistency Can be configured for strong consistency Depends on product. Some provide strong consistency (e.g., MongoDB) whereas others offer eventual consistency (e.g., Cassandra)

 Read More: http://www.mongodb.com/learn/nosql

                                   Auther: Aneesh Sivan

Simple RegEx Validation using jQuery

How to validate an email filed using RegEx 

HTML

Name <input type=”text” id=”txtEmail” />
<input type=”button” id=”btnOk” value=”OK”/>

jQuery

$(document).ready(function () {
       $(‘#btnOk’).live(‘click’, function () {
       email_address = $(‘#txtEmail’);
       email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
       if (!email_regex.test(email_address.val())) {
            alert(‘this is not valid email’);
            e.preventDefault(); return false;
         }
           else {
            alert(‘Valid email’);
           }

      });
});

                                                                                        Author : Aneesh Sivan

How to disable Back functionality of a browser?

Disable Back functionality using history.forward

We can disable the back navigation by adding following code in the webpage. Now the catch here is that you have to add this code in all the pages where you want to avoid user to get back from previous page. For example user follows the navigation page1 -> page2. And you want to stop user from page2 to go back to page1. In this case all following code in page1.

<SCRIPT type="text/javascript">
    window.history.forward();
    function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
    onpageshow="if (event.persisted) noBack();" onunload="">

The above code will trigger history.forward event for page1. Thus if user presses Back button on page2, he will be sent to page1. But the history.forward code on page1 pushes the user back to page2. Thus user will not be able to go back from page1.

Warn User if Back is Pressed

You may want to warn user if Back button is pressed. This works in most of the cases. If you have some unsaved form data, you might want to trigger a warning message to user if Back button is pressed.

Following Javascript snippet will add a warning message in case Back button is pressed:

window.onbeforeunload = function() { return "You work will be lost."; };

Include this in your HTML page to popup a warning message.

Source: http://viralpatel.net/blogs/disable-back-button-browser-javascript/

What is CSS media types?

Image

1. Introduction to css media types

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Certain CSS properties are only designed for certain media. On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the ‘font size’ property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

2. Specifying media-dependent style sheets

There are currently two ways to specify media dependencies for style sheets:

Specify the target medium from a style sheet with the @media or @import at-rules.

@import url("fancyfonts.css") screen;
@media print {
  /* style sheet for print goes here */
}

Specify the target medium within the document language. For example, in HTML 4 the “media” attribute on the LINK element specifies the target media of an external style sheet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK REL="stylesheet" TYPE="text/css" 
             MEDIA="print, handheld" HREF="foo.css">
   </HEAD>
   <BODY>
      <P>The body...
   </BODY>
</HTML>

 

 

 

The @media rule

An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). Invalid statements must be ignored per 4.1.7 "Rule sets, declaration blocks, and selectors" and 4.2 "Rules for handling parsing errors." The @media construct allows style sheet rules for various media in the same style sheet:
 
  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

Style rules outside of @media rules apply to all media types that the style sheet applies to. At-rules inside @media are invalid in CSS2.1.

3. Recognized media types

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types the names of media types are normative, but the descriptions are informative. Likewise, the “Media” field in the description of each property is informative.

all

Suitable for all devices.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small screen, limited bandwidth).

print

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.

projection

Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.

screen

Intended primarily for color computer screens.

speech

Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details.

tty

Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the “tty” media type.

tv

Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media type names are case-insensitive.

Media types are mutually exclusive in the sense that a user agent can only support one media type when rendering a document. However, user agents may use different media types on different canvases. For example, a document may (simultaneously) be shown in ‘screen’ mode on one canvas and ‘print’ mode on another canvas.

Note that a multimodal media type is still only one media type. The ‘tv’ media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas.

@media and @import rules with unknown media types (that are nonetheless valid identifiers) are treated as if the unknown media types are not present. If an @media/@import rule contains a malformed media type (not an identifier) then the statement is invalid.

Note: Media Queries supercedes this error handling.

For example, in the following snippet, the rule on the P element applies in ‘screen’ mode (even though the ‘3D’ media type is not known).

@media screen, 3D {
  P { color: green; }
}

Note. Future updates of CSS may extend the list of media types. Authors should not rely on media type names that are not yet defined by a CSS specification.

Media groups

This section is informative, not normative.

Each CSS property definition specifies which media types the property applies to. Since properties generally apply to several media types, the “Applies to media” section of each property definition lists media groups rather than individual media types. Each property applies to all media types in the media groups listed in its definition.

CSS 2.1 defines the following media groups:

  • continuous or paged.
  • visual, audio, speech, or tactile.
  • grid (for character grid devices), or bitmap.
  • interactive (for devices that allow user interaction), or static (for those that do not).
  • all (includes all media types)

The following table shows the relationships between media groups and media types:

Relationship between media groups and media types

Media Types

Media Groups

 

continuous/paged

visual/audio/speech/tactile

grid/bitmap

interactive/static

braille

continuous

tactile

grid

both

embossed

paged

tactile

grid

static

handheld

both

visual, audio, speech

both

both

print

paged

visual

bitmap

static

projection

paged

visual

bitmap

interactive

screen

continuous

visual, audio

bitmap

both

speech

continuous

speech

N/A

both

tty

continuous

visual

grid

both

tv

both

visual, audio

bitmap

both

 Author: Aneesh Sivan,

 Reference: W3C Candidate Recommendation 12 October 2010

What is a Browser Engine?

Browser Engine

A web browser engine, (sometimes called layout engine or rendering engine), is a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen. It “paints” on the content area of a window, which is displayed on a monitor or a printer. A web browser engine is typically embedded in web browsers, e-mail clients, on-line help systems or other applications that require the displaying (and editing) of web content.

Have a look some most popular browser engines

Trident

  • Popular Browsers & Applications: Internet Explorer, Avant Browser, Maxathon, Microsoft Outlook, Outlook Express, AOL Browser
  • License: Closed-Source
  • Acid2 Compatible: Yes (in version VI included in Internet Explorer 8)
  • Acid3 Compatible: No
  • Operating Systems: Windows
  • Major Contributors: Microsoft
  • First Released: April 1997

Gecko

  • Popular Browsers & Applications: Firefox, Camino, Flock, Thunderbird, Seamonkey, Epiphany, NVU, Netscape, K-Meleon
  • License: Open-Source
  • Acid2 Compatible: Yes
  • Acid3 Compatible: No
  • Operating Systems: Windows, Mac OS X, Linux/BSD
  • Major Contributors: Mozilla Corporation, Netscape (originally)
  •  First Released: December 1998

WebKit

  • Popular Browsers & Applications: Safari, Chrome, Adobe AIR, iCab, Epiphany (experimental), Konqueror (KHTML)
  • License: Open-Source
  • Acid2 Compatible: Yes
  • Acid3 Compatible: Yes
  • Operating Systems: Windows, Mac OS X, Linux/BSD
  • Major Contributors: WebKit Foundation, Apple, Nokia, Adobe, Google, KDE Team (originally)
  • First Released: January 2003 (forked from KHTML, which was first released in October 2000)

Presto

  • Popular Browsers & Applications: Opera Desktop/Mobile/Mini, Nintendo DS, Wii Internet Channel, Macromedia Dreamweaver MX and above, Adobe CS 2 and above
  • License: Closed-Source
  • Acid2 Compatible: Yes
  • Acid3 Compatible: Yes
  • Operating Systems: Windows, Mac OS X, Linux/BSD
  • Major Contributors: Opera Software
  • First Released: November 2002

Usage share of web browsers

Author: Aneesh Sivan

What is jQuery ?

jQuery

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 46% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today.
Query is not a language but it is a well written JavaScript code, It is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. In order to work with jQuery you should be aware of basics of JavaScript, HTML and CSS.

Advantages of jQuery

jQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very less amount of code.It helps to

• Improve the performance of the application
• Develop most browser compatible web page
• Implement UI related critical functionality without writing hundreds of lines of codes
• Fast
• Extensible – jQuery can be extended to implement customized behavior
• No need to learn fresh new syntaxes to use jQuery, knowing simple JavaScript syntax is enough
• Simple and Cleaner code, no need to write several lines of codes to achieve complex functionality.

How to include jQurey in your page

<script type="text/javascript" src="jquery.js"></script>

Basic way to introduce a jQuery function is to use the .ready() function.

$(document).ready(function() {
// jquery goes here
});

Want more? Visit jQuery.com