background preloader

HTML5 Custom Data Attributes (data-*)

HTML5 Custom Data Attributes (data-*)
Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. Attribute Name The data attribute name must be at least one character long and must be prefixed with 'data-'. Attribute Value The attribute value can be any string. Using this syntax, we can add application data to our markup as shown below: <ul id="vegetable-seeds"> <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li> <li data-spacing="30cm" data-sowing-time="February to March">Celery</li> <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li></ul> We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. A word of warning Summary

CSS Media Queries & Using Available Space We've covered using CSS media queries to assign different stylesheets depending on browser window size. In that example, we changed the layout of the entire page based on the space available. It isn't required that we make such drastic changes with this technique though, so in this tutorial we'll go over a design tweak with a smaller scope. We'll also cover the syntax for using media queries within a single stylesheet and more examples of that. The CSS media query syntax for calling an external stylesheet is like this: You may be familiar with the media attribute, normally being "screen" or "print" or even a comma separated list, like "screen, projection". Likewise, you can use more advanced CSS media queries like: You may use as many media queries as you would like in a CSS file. Example Let's say we have a fluid width design where the sidebar is 35% of the width of the page. In our example sidebar, we are going have a list of names of the Super Team which function as email links. Types

Google Analytics Tagging with HTML5 data-* Attributes » Code Nomad Imagine if you will, a page with a significant amount of dynamic page elements. For instance, a slide-out panel containing a number of ‘panes’ containing topical information on various ‘factors’. Let’s assume that once this slide-out is open, we wish the user to be able to jump from factor to factor (similar to a slideshow) using buttons along the bottom of each factor. Let’s go even deeper and say that within each factor, we have a collection of close-up images. Again, the user should be able to navigate the close-ups via next/previous buttons similar to a slideshow. Tag Templates Tagging template for the factor navigation along the bottom of each [x] factor: /page_name/factor_[x]/factor_1_icon /page_name/factor_[x]/factor_2_icon /page_name/factor_[x]/factor_3_icon Tagging template for the prev/next buttons on each [y] close-up on each [x] factor: /page_name/factor_[x]/closeup_[y]/next_arrow /page_name/factor_[x]/closeup_[y]/prev_arrow Approach As with anything, I try to keep my code DRY.

Media Queries Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. Also see the Disposition of comments and a list of changes relative to the previous Proposed Recommendation. 1. 3.

HTML5 This Version: Latest Published Version: Latest Version of HTML: Latest Editor's Draft of HTML: Previous Version: Previous Recommendation: Editors: Ian Hickson, Google, Inc. Robin Berjon, W3C Steve Faulkner, The Paciello Group Travis Leithead, Microsoft Corporation Erika Doyle Navara, Microsoft Corporation Edward O'Connor, Apple Inc. Silvia Pfeiffer Please check the errata for any errors or issues reported since publication. This specification is also available as a single page HTML document. Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. Abstract This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). Status of This document

12 Jquery & CSS3 resources and tutorials (+ 18) Two things a web designer needs are inspiration and knowledge about all the aspects of the "web process". New technologies are constantly being revised and renewed. We all know CSS3 by now, it's very powerful and if mixed with the awesomeness of Jquery and HTML 5, the results can be mind-blowing. Today we leave you with 12 resources, and then some, so you can use on your projects and give them that extra awesome twist.

A Basic HTML5 Template For Any Project What follows is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This post was originally published in 2013 and was updated in April 2016. As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself boilerplate, from which you can begin all your HTML5-based projects. We encourage this, and you may also consider using one of the many online sources that provide a basic HTML5 starting point for you.[] In this project, however, we want to build our code from scratch and explain each piece as we go along. Of course, it would be impossible for even the most fantastical and unwieldy sample site we could dream up to include every new element or technique, so we’ll also explain some new features that don’t fit into the project. Let’s start simple, with a bare-bones HTML5 page: <! The Doctype First, we have the Document Type Declaration, or doctype. And for HTML4 Transitional: Simple, and to the point.

Responsinator Responsive Web Design - Learn to Code Advanced HTML Lesson 4 The Internet took off quicker than anyone would have predicted, growing like crazy. Now, for the past few years, mobile growth has exploded onto the scene. The growth of mobile Internet usage is also far out pacing that of general Internet usage growth. These days it is hard to find someone who doesn’t own a mobile device, or multiple, connected to the Internet. In the UK there are more mobile phones than people, and should trends continue mobile Internet usage will surpass that of desktop Internet usage within the year. With the growth in mobile Internet usage comes the question of how to build websites suitable for all users. Responsive Overview#responsive-web-design Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. The responsive web design term itself was coined, and largely developed, by Ethan Marcotte. Responsive vs. Flexible Layouts#flexible-layouts

Related: