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!
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!
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 .
HTML5 Cross Browser Polyfills - GitHub
The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly. Looking to conditionally load these scripts (client-side), based on feature detects? svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas Web Storage (LocalStorage and SessionStorage) Non HTML5 API Solutions ssw by Matthias Schäfer$.store by Rodney Rehmlawnchair by Brian Lerouxstore.js by Marcus WestinPersistJS by Paul DuncanSquirrel.js by Aaron GustafsonjStorage by Andris Reinman Video
Code Standards | Isobar
Overview This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Isobar. It is to be readily available to anyone who wishes to check the iterative progress of our best practices. This document's primary motivation is two- fold: 1) code consistency and 2) best practices. Pillars of Front-end Development◊ General Practices◊ Indentation◊ For all code languages, we require indentation to be done via soft tabs (using the space character). Readability vs Compression◊ We prefer readability over file-size savings when it comes to maintaining existing files. We will use server-side or build processes to automatically minify and gzip all static client-side files, such as CSS and JavaScript. The first component of any web page is the tag-based markup language of HTML. Markup defines the structure and outline of a document and offers a structured content. HTML5 is a new version of HTML and XHTML. Template◊ Doctype◊ HTML5 Doctype 1. 1. 1. 2. 5.
