Beginner's Guide to Application Cache Introduction It's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individual items out of the cache at any point to make room for other things. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface. Using the cache interface gives your application three advantages: Offline browsing - users can navigate your full site when they're offline Speed - resources come straight from disk, no trip to the network. The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. The cache manifest file The cache manifest file is a simple text file that lists the resources the browser should cache for offline access. Referencing a manifest file To enable the application cache for an app, include the manifest attribute on the document's html tag:
Prefix free: Break free from CSS vendor prefix hell! -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it. In older browsers like IE8, nothing will break, just properties won’t get prefixed. Test the prefixing that -prefix-free would do for this browser, by writing some CSS below: Properties/values etc that already have a prefix won’t be altered. It’s not ideal, but it’s a solution, until a more intuitive way to deal with these cases is added in -prefix-free. Please note that in unsupported browsers like IE8, no such class will be added. You can exclude a file from being prefixed by adding the data-noprefix attribute to the <link> or <style> element. Firefox (and IE?) Get the jQuery plugin now:
Flexible CSS cover images I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio. This post describes the implementation. Demo: Flexible CSS cover images Known support: Chrome, Firefox, Safari, Opera, IE 9+ Features The way that the cover image scales, and changes aspect ratio, is illustrated in the following diagram. The cover image component must: render at a fixed aspect ratio, unless specific maximum dimensions are exceeded;support different aspect ratios;support max-height and max-width;support different background images;display the image to either fill, or be contained within the component;center the image. Aspect ratio The aspect ratio of an empty, block-level element can be controlled by setting a percentage value for its padding-bottom or padding-top. Changing that padding value will change the aspect ratio. Maximum dimensions Background image Final result
Optimisation HTML5 Please Multi-Device Layout Patterns Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts. To get a sense of emerging responsive design layout patterns, I combed through all the examples curated on the Media Queries gallery site several times. I looked for what high-level patterns showed up most frequently and tried to avoid defining separate patterns where there were only small differences. Mostly Fluid The most popular pattern was perhaps surprisingly simple: a multi-column layout that introduces larger margins on big screens, relies on fluid grids and images to scale from large screens down to small screen sizes, and stacks columns vertically in its narrowest incarnations (illustrated below). Column Drop Layout Shifter
CSSO/Optimizers/Tools/BEM CSSO (CSS Optimizer) is a CSS minimizer unlike others. In addition to usual minification techniques it can perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers. Safe transformations: Removal of whitespaceRemoval of trailing ;Removal of commentsRemoval of invalid @charset и @import declarationsMinification of color propertiesMinification of 0Minification of multi-line stringsMinification of the font-weight property Structural optimizations: Merging blocks with identical selectorsMerging blocks with identical propertiesRemoval of overridden propertiesRemoval of overridden shorthand propertiesRemoval of repeating selectorsPartial merging of blocksPartial splitting of blocksRemoval of empty ruleset and at-ruleMinification of margin and padding properties The minification techniques are described in detail in the detailed description. Please report issues on [Github] ( CSSO is licensed under MIT
[be]lazy.js || A lazy loading and multi-serving image script What is bLazy? bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page. For a full list of options, functions and examples go to the blog post: The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image.