Contents
CSS3 media queries
With the rise of mobile devices, and on the other hand, of very wide displays, creating a website that looks great in both big and small devices is definitely a challenge for web designers and developers. Happily, the CSS3 specification have a new feature which allow web developers to define styles for a specific display size only.
For example, the code below show how to apply a specific style only if the client display is smaller than 767px.
@media screen and (max-width:767px){
#container{
width:320px;
}
header h1#logo a{
width:320px;
height:44px;
background:url(image-small.jpg) no-repeat 0 0;
}
}Font resizing with REMs
CSS3 introduces a few new units, including the rem unit, which stands for “root em”. If this hasn’t put you to sleep yet, then let’s look at how rem works.
The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */Cache pages for offline usage
HTML5 introduces a great feature, offline caching. Basically, this feature allows you to tell the client browser to cache some pages so your visitor will be able to view it again, even if he’s not connected to the Internet.
Caching pages is pretty easy. The first thing to do is to add the following to your site .htaccess file:
AddType text/cache-manifest .manifest
Once done, you can create a file named, for example, offline.manifest, with the following directives:
CACHE MANIFEST CACHE index.html style.css image.jpg
And finally, link your .manifest file to your html document:
<html manifest="/offline.manifest">
That’s all, and your page will now be cached if the client browser supports this technology.
Server-side JavaScript
Since the mid-90′s, JavaScript has been a very popular client-side language for web developers. But nowadays, JavaScript is becoming more and more used on the server side. Why? Because now we have powerful server-side JavaScript environments such as Jaxer, Node.js and Narwhal.
The code belows demonstrate how to create a simple Hello World using Node.js.
var sys = require("sys");
sys.puts("Hello World!");HTML5 drag & drop
Thanks to new technologies such as HTML5, the web is becoming more and more user-friendly. Now, it is possible to easily implement drag and drop on your web pages. This is very useful, for example for a shopping basket.
In order to make an element draggable, you simply have to add it the draggable="true" attribute, as shown in the example below:
<div id="columns"> <div draggable="true"><header>A</header></div> <div draggable="true"><header>B</header></div> <div draggable="true"><header>C</header></div> </div>
Of course, after you made an element draggable, you have to use some JavaScript to control what it should do. I’m not going to explain how to do it (This may be a full article!) so you definitely have a look there if you’re interested in the topic.
Quick tip: If you want to prevent the text contents of draggable elements from being selectable, simply apply the following CSS rules:
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
thanks for this post… this is realy very usefull for me…thanks once again… its help me to develop a good website
From:
Brainz Marchant..
I will immediately clutch your rss feed as I can’t find your email subscription hyperlink or newsletter service. Do you have any? Kindly permit me understand so that I could subscribe. Thanks.
Wonderful paintings! This is the type of information that are supposed to be shared around the web. Disgrace on the search engines for no longer positioning this publish higher! Come on over and talk over with my web site . Thanks =)