V4 SP2 Snippets
See
also the Snippets tutorial
I've created eight new groups of snippets for SP2, described below.
Installation instructions.
Robots Meta Tags
The Robots Meta Tags cover the normal robots related tags.
HTML5
Note: V4 Update added 05 Mar 2012
The snippets for the new HTML5 semantic layout elements include a
JavaScript shim (sometimes known as a 'polyfill'), 'LT IE9 shim'
and a style definition, 'LT HTML5 style' that enables these
elements to be recognised and styled by versions of IE6 upwards. This
ensures users with non-HTML5 browsers still see the page as you
intended.
Note: that this shim should be placed within the
<head>..</head> tags and the style should be added to your
main stylesheet.
V4 adds a CDN link to the NWX shim for the HTML5 form input types.
The Microdata snippets follow a data model that is recognised by the
major search engines.
For an explanation of these Microdata parameters see
Schema.org
Google +1
To add a Google +1 button to a page using these snippets, first add the
'JavaScript tag' inside the <head>..</head> section of the page and then
add the 'Google +1' snippet where you want the button to appear on the
page.
Note that this won't show in xWeb's Design View and needs to be
previewed in a browser.
Lorem Ipsum filler text
The Lorem Ipsum filler text snippet is a reworking, for SP2, of Anna Ulrich's
original snippets for V3, V3 and V4.
These allow you to insert 1 to 5 paragraphs of Latin filler placeholder
filler text. This can be useful when working up a design or demonstrating an
outline to a customer etc.
CDN - Javascript libraries V2
Note: V2 update added 12 March 2013, using latest versions
and entryg jQuery DataTables and Knockout.
These provide links to the JavaScript libraries on the Microsoft Ajax and
Google CDNs.
If you are not familiar with these you should read the on-line
documentation.
jQuery
Cycle plug-in V2.99
jQuery Mobile
V1.3
jQuery Validate V1.11.0
jQuery
DataTables V1.9.4
Knockout V2.2.1
Dynamic Model-View-View Model UIs
Modernizr V2.06. Note
that this is a link to the full 'development' version. For use on a live
site you should use a site-specific version that can be created on the Modernizr site.
Google WebFont Loader
IE Conditional Comments
With the increasing use of HTML5 in particular, it's increasingly
necessary to use conditional styles for both IE9 and the earlier
versions to ensure a common browser viewing experience.
These snippets include the frequently used Conditional Comments.
The "!IE" (NOT IE) comment has the correct format, which is
slightly different to the others and is often used incorrectly.
A test
page shows these in use. Open the page in say IE9 and then use
the Developer Tools to change the browser mode. You'll see the
browser type is detected. If you test in any other browser, you'll
see the green block changes to red.
Mobile Snippets
Note: V2 update adds the Viewport meta tag
Seven snippets to help with mobile-friendly site development.
For full details see V4 Mobile Snippets
CSS3 vendor-specific style properties
The standard snippets in SP2 have styles that include some of the
vendor-specific properties. However it's more useful to have the style
properties to apply to your own classes, rather than pre-defined styles.
This collection of snippets gives the vendor-specific properties for several
of the most useful CSS3 styles.
Note that browser support is not complete and that you should test them
fully in your application.
Aria Properties Snippets
A collection of snippets for the W3C 'ARIA' (Accessible Rich Internet
Application) model, now officially part of the HTML5 specification and
embedded in the major JavaScript libraries, jQuery, DoJo and YUI. Most
current assistive technology tools, JAWS, NVDA and VoiceOver support ARIA.
The snippets are arranged in logical groups detailed by W3C and
duplicated where this helps to clarify use.
Further information on the states and properties can be found at
http://www.w3.org/TR/wai-aria/states_and_properties
A good MSDN article on the topic:
http://msdn.microsoft.com/en-us/magazine/jj863135.aspx
Installing Snippets
To install the Snippet collections, download the zip file and extract the
contents to:
•Windows XP:
C:\Documents and Settings\[your windows user name]\Application
Data\Microsoft\Expression\Web 4\mySnippets
•Windows Vista, Windows 7 or Windows 8:
C:\Users\[your windows
username]\AppData\Roaming\Microsoft\Expression\Web 4\mySnippets