1. css3 media queries
Currently, the emergence of a large number of smart phone devices and the emergence of various screen devices, such as tablets, poses unprecedented challenges to web development, how to Adapt web pages to screens of various sizes makes a lot of web developers struggle. Fortunately, the css3 specification helps us solve this problem easily. You can define different CSS styles Based on screens of different sizes.
For exampleCodeValid only when the size of the area displayed on the screen is 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 ;}}
2. Font resizing with REMs
Css3 introduces new font size units REM (root RM)
The EM unit is relative to the font-size of the parent node. There may be some combination problems, while REM is relative to the root node (or HTML node ), this means that you can define a separate font size on the HTML node, and then set the percentage of all other elements with REM relative to the font.
HTML {font-size: 62.5%;} body {font-size: 1.4rem;}/* = 14px */H1 {font-size: 2.4rem;}/* = 24px */
3. cache pages for offline usage
HTML5 introduces a powerful feature: offline caching. This feature allows you to tell your browser to cache some pages so that you can access the page again offline.
It is very easy to cache pages. First, add the following line to the. htaccess file of your website:
Addtype text/cache-manifest. manifest
Then you can create a file such as offline. manifest, which contains the following content:
Cache manifest cache index.html style.css image.jpg
Finally, add:
<HTML manifest = "/offline. manifest">
4. server-side Javascript
Javascript is now a very popular Web Client.Programming LanguageBut Javascript is also growing on the server side, through powerful JavaScript server environment: jaxer, node. JS, and narwhal.
The following code shows how to use node. js to create a simple hello WorldProgram:
VaR sys = require ("sys"); SYS. Puts ("Hello world! ");
5. HTML5 Drag & drop
HTML5 makes drag-and-drop on Web pages very simple. We just need to define the draggable = "true" attribute, as shown below:
<Div id = "columns"> <Div class = "column" draggable = "true">With these draggable = true elements, we only need to write some simple JavaScript code to process drag and drop. Here we will not describe the processing process in detail.
Tip: to prevent drag-and-drop elements from being selected, use the following CSS rules:
[Draggable] {-moz-user-select: none;-khtml-user-select: none;-WebKit-user-select: none; User-select: none ;}6. forms, the HTML5 way
HTML5 specifications introduce many new features in form definition, including many new form components, for example, select a date, adjust a number, and use a regular expression to verify the input box (email, tel, link ).
the following code displays some new form elements:
<Form> <label for = "range-slider"> slider </label> <input type = "range" name = "range-slider" id = "range-slider" Class = "Slider" min = "0" max = "20" step = "1" value = "0"> <label for = "Numeric-spinner"> numeric spinner </label> <input type = "Number" name = "Numeric-spinner" id = "Numeric-spinner" value = "2"> <label for = "date-picker"> Date Picker </label> <input type = "date" name = "date-picker" id = "date-picker" value = "2010-10-06 6"> <label for = "color-picker"> color picker </label> <input type = "color" name = "color-picker" id = "color-picker" value = "ff0000"> <label for = "Text -Field "> text field with placeholder </label> <input type =" text "name =" text-field "id =" text-field "Placeholder =" insert your text here "> <label for =" url-field "> URL field </label> <input type =" url "id =" url-field "name =" url-field "Placeholder = "http://net.tutsplus.com/" required> <label for = "email-field"> email field </label> <input type = "email" id = "email-field" name =" e-mail-field "Placeholder =" contact@ghinda.net "required> <button type =" Submit "class =" UI-button UI-widget UI-state-default UI-corner-All UI-button -text-only "role =" button "Aria-Disabled =" false "> <SPAN class =" UI-button-text "> submit form </span> </button> </form>7. CSS animations
Many browsers now support CSS animation. Yes, CSS allows you to create some simple animations without the support of JavaScript.
the following code shows how to change the background color:
# logo {margin: 15px 15px 0 15px; Background: red; float: left; /* Firefox 4 + */-moz-animation-Name: Color-change;-moz-animation-timing-function: Linear;-moz-animation-iteration-count: infinite; -Moz-animation-Duration: 30 s;/* WebKit */-WebKit-animation-Name: Color-change;-WebKit-animation-timing-function: Linear; -WebKit-animation-iteration-count: infinite;-WebKit-animation-Duration: 30 s;} @-moz-keyframes color-Change {0% {Background: red ;} 33% {Background: green;} 66% {Background: Blue; }}@-WebKit-keyframes color-Change {0% {Background: red;} 33% {Background: green ;} 66% {Background: Blue ;}}http://www.catswhocode.com/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
