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
HTML 5 data- Attributes
A new feature being introduced in HTML 5 is the addition of custom data attributes. This is a, seemingly, bizarre addition to the specification – but actually provides a number of useful benefits. Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. <li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b><span>Hello, how are you? The above will be perfectly valid HTML 5. Using HTML, but with a custom DTD.Using XHTML, with a specific namespace. The addition of this prefix completely routes around both issues (including any extra markup for validation or needing to be valid XHTML) with this effective addition.
yepnope.js | A Conditional Loader For Your Polyfills!
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.
Should you be using HTML5 today?
Despite all the hype about HTML5, there are still many people (mainly web developers!) out there who are wondering whether or not they should use it in their next site. The main issues seem to be browser compatibility and the myth that HTML5 won’t be ready for mainstream usage until 2022. To begin with, let’s bust this myth once and for all. For any specification to be deemed “ready”, it supposedly needs to be fully implemented in two browsers. If this rule was true, CSS2.1 also wouldn’t be “ready”, and do you hear people advising you to hold off on using that? As for browser compatibility, the latest versions of browsers such as Firefox, Chrome, Safari and Opera all support various parts of the HTML5 specification, and older versions of these browsers support bits of the spec. Pretty well, actually, and there are a lot of things you can do to ensure browser compatibility. New elements Whilst all of these browsers will happily accept the HTML5 doctype (<! Styling HTML5 Reset Modernizr
Initializr - Start your HTML5 project in 15 seconds!
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.
4 The elements of HTML — HTML5
4.2.1 The head element Categories: None. Contexts in which this element can be used: As the first element in an html element. Content model: If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content, of which no more than one is a title element and no more than one is a base element. Otherwise: One or more elements of metadata content, of which exactly one is a title element and no more than one is a base element. Content attributes: Global attributes Tag omission in text/html: A head element's start tag may be omitted if the element is empty, or if the first thing inside the head element is an element. A head element's end tag may be omitted if the head element is not immediately followed by a space character or a comment. Allowed ARIA role attribute values: none Allowed ARIA state and property attributes: Global aria-* attributes DOM interface: interface HTMLHeadElement : HTMLElement {}; <! <! 4.2.2 The title text .
