diff --git a/en/code/happy-birthday-starter2/boy.png b/en/code/happy-birthday-starter2/boy.png new file mode 100644 index 00000000..f1a2c358 Binary files /dev/null and b/en/code/happy-birthday-starter2/boy.png differ diff --git a/en/code/happy-birthday-starter2/cracker.png b/en/code/happy-birthday-starter2/cracker.png new file mode 100644 index 00000000..265a6d54 Binary files /dev/null and b/en/code/happy-birthday-starter2/cracker.png differ diff --git a/en/code/happy-birthday-starter2/diamond.png b/en/code/happy-birthday-starter2/diamond.png new file mode 100644 index 00000000..944fdcc3 Binary files /dev/null and b/en/code/happy-birthday-starter2/diamond.png differ diff --git a/en/code/happy-birthday-starter2/dinosaur.png b/en/code/happy-birthday-starter2/dinosaur.png new file mode 100644 index 00000000..a54d55d8 Binary files /dev/null and b/en/code/happy-birthday-starter2/dinosaur.png differ diff --git a/en/code/happy-birthday-starter2/elf.png b/en/code/happy-birthday-starter2/elf.png new file mode 100644 index 00000000..06703bbb Binary files /dev/null and b/en/code/happy-birthday-starter2/elf.png differ diff --git a/en/code/happy-birthday-starter2/flowers.png b/en/code/happy-birthday-starter2/flowers.png new file mode 100644 index 00000000..858e21de Binary files /dev/null and b/en/code/happy-birthday-starter2/flowers.png differ diff --git a/en/code/happy-birthday-starter2/girl.png b/en/code/happy-birthday-starter2/girl.png new file mode 100644 index 00000000..142992e7 Binary files /dev/null and b/en/code/happy-birthday-starter2/girl.png differ diff --git a/en/code/happy-birthday-starter2/index.html b/en/code/happy-birthday-starter2/index.html new file mode 100644 index 00000000..3659c97b --- /dev/null +++ b/en/code/happy-birthday-starter2/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + +
+ +

+ Happy Birthday! +

+ + + +

+ +

+ +
+ +
+ +

+ Happy Birthday! +

+ + + +

+ Your message here! +

+ +

+ +

+ +
+ + + + \ No newline at end of file diff --git a/en/code/happy-birthday-starter2/penguin.png b/en/code/happy-birthday-starter2/penguin.png new file mode 100644 index 00000000..352032ed Binary files /dev/null and b/en/code/happy-birthday-starter2/penguin.png differ diff --git a/en/code/happy-birthday-starter2/prefixfree.js b/en/code/happy-birthday-starter2/prefixfree.js new file mode 100644 index 00000000..e2c87c42 --- /dev/null +++ b/en/code/happy-birthday-starter2/prefixfree.js @@ -0,0 +1,497 @@ +/** + * StyleFix 1.0.3 & PrefixFree 1.0.7 + * @author Lea Verou + * MIT license + */ + +(function(){ + +if(!window.addEventListener) { + return; +} + +var self = window.StyleFix = { + link: function(link) { + try { + // Ignore stylesheets with data-noprefix attribute as well as alternate stylesheets + if(link.rel !== 'stylesheet' || link.hasAttribute('data-noprefix')) { + return; + } + } + catch(e) { + return; + } + + var url = link.href || link.getAttribute('data-href'), + base = url.replace(/[^\/]+$/, ''), + base_scheme = (/^[a-z]{3,10}:/.exec(base) || [''])[0], + base_domain = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(base) || [''])[0], + base_query = /^([^?]*)\??/.exec(url)[1], + parent = link.parentNode, + xhr = new XMLHttpRequest(), + process; + + xhr.onreadystatechange = function() { + if(xhr.readyState === 4) { + process(); + } + }; + + process = function() { + var css = xhr.responseText; + + if(css && link.parentNode && (!xhr.status || xhr.status < 400 || xhr.status > 600)) { + css = self.fix(css, true, link); + + // Convert relative URLs to absolute, if needed + if(base) { + css = css.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi, function($0, quote, url) { + if(/^([a-z]{3,10}:|#)/i.test(url)) { // Absolute & or hash-relative + return $0; + } + else if(/^\/\//.test(url)) { // Scheme-relative + // May contain sequences like /../ and /./ but those DO work + return 'url("' + base_scheme + url + '")'; + } + else if(/^\//.test(url)) { // Domain-relative + return 'url("' + base_domain + url + '")'; + } + else if(/^\?/.test(url)) { // Query-relative + return 'url("' + base_query + url + '")'; + } + else { + // Path-relative + return 'url("' + base + url + '")'; + } + }); + + // behavior URLs shoudn’t be converted (Issue #19) + // base should be escaped before added to RegExp (Issue #81) + var escaped_base = base.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1"); + css = css.replace(RegExp('\\b(behavior:\\s*?url\\(\'?"?)' + escaped_base, 'gi'), '$1'); + } + + var style = document.createElement('style'); + style.textContent = css; + style.media = link.media; + style.disabled = link.disabled; + style.setAttribute('data-href', link.getAttribute('href')); + + parent.insertBefore(style, link); + parent.removeChild(link); + + style.media = link.media; // Duplicate is intentional. See issue #31 + } + }; + + try { + xhr.open('GET', url); + xhr.send(null); + } catch (e) { + // Fallback to XDomainRequest if available + if (typeof XDomainRequest != "undefined") { + xhr = new XDomainRequest(); + xhr.onerror = xhr.onprogress = function() {}; + xhr.onload = process; + xhr.open("GET", url); + xhr.send(null); + } + } + + link.setAttribute('data-inprogress', ''); + }, + + styleElement: function(style) { + if (style.hasAttribute('data-noprefix')) { + return; + } + var disabled = style.disabled; + + style.textContent = self.fix(style.textContent, true, style); + + style.disabled = disabled; + }, + + styleAttribute: function(element) { + var css = element.getAttribute('style'); + + css = self.fix(css, false, element); + + element.setAttribute('style', css); + }, + + process: function() { + // Linked stylesheets + $('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link); + + // Inline stylesheets + $('style').forEach(StyleFix.styleElement); + + // Inline styles + $('[style]').forEach(StyleFix.styleAttribute); + }, + + register: function(fixer, index) { + (self.fixers = self.fixers || []) + .splice(index === undefined? self.fixers.length : index, 0, fixer); + }, + + fix: function(css, raw, element) { + for(var i=0; i -1) { + // Gradients are supported with a prefix, convert angles to legacy + css = css.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function ($0, delim, repeating, deg) { + return delim + (repeating || '') + 'linear-gradient(' + (90-deg) + 'deg'; + }); + } + + css = fix('functions', '(\\s|:|,)', '\\s*\\(', '$1' + prefix + '$2(', css); + css = fix('keywords', '(\\s|:)', '(\\s|;|\\}|$)', '$1' + prefix + '$2$3', css); + css = fix('properties', '(^|\\{|\\s|;)', '\\s*:', '$1' + prefix + '$2:', css); + + // Prefix properties *inside* values (issue #8) + if (self.properties.length) { + var regex = RegExp('\\b(' + self.properties.join('|') + ')(?!:)', 'gi'); + + css = fix('valueProperties', '\\b', ':(.+?);', function($0) { + return $0.replace(regex, prefix + "$1") + }, css); + } + + if(raw) { + css = fix('selectors', '', '\\b', self.prefixSelector, css); + css = fix('atrules', '@', '\\b', '@' + prefix + '$1', css); + } + + // Fix double prefixing + css = css.replace(RegExp('-' + prefix, 'g'), '-'); + + // Prefix wildcard + css = css.replace(/-\*-(?=[a-z]+)/gi, self.prefix); + + return css; + }, + + property: function(property) { + return (self.properties.indexOf(property) >=0 ? self.prefix : '') + property; + }, + + value: function(value, property) { + value = fix('functions', '(^|\\s|,)', '\\s*\\(', '$1' + self.prefix + '$2(', value); + value = fix('keywords', '(^|\\s)', '(\\s|$)', '$1' + self.prefix + '$2$3', value); + + if(self.valueProperties.indexOf(property) >= 0) { + value = fix('properties', '(^|\\s|,)', '($|\\s|,)', '$1'+self.prefix+'$2$3', value); + } + + return value; + }, + + // Warning: Prefixes no matter what, even if the selector is supported prefix-less + prefixSelector: function(selector) { + return selector.replace(/^:{1,2}/, function($0) { return $0 + self.prefix }) + }, + + // Warning: Prefixes no matter what, even if the property is supported prefix-less + prefixProperty: function(property, camelCase) { + var prefixed = self.prefix + property; + + return camelCase? StyleFix.camelCase(prefixed) : prefixed; + } +}; + +/************************************** + * Properties + **************************************/ +(function() { + var prefixes = {}, + properties = [], + shorthands = {}, + style = getComputedStyle(document.documentElement, null), + dummy = document.createElement('div').style; + + // Why are we doing this instead of iterating over properties in a .style object? Cause Webkit won't iterate over those. + var iterate = function(property) { + if(property.charAt(0) === '-') { + properties.push(property); + + var parts = property.split('-'), + prefix = parts[1]; + + // Count prefix uses + prefixes[prefix] = ++prefixes[prefix] || 1; + + // This helps determining shorthands + while(parts.length > 3) { + parts.pop(); + + var shorthand = parts.join('-'); + + if(supported(shorthand) && properties.indexOf(shorthand) === -1) { + properties.push(shorthand); + } + } + } + }, + supported = function(property) { + return StyleFix.camelCase(property) in dummy; + } + + // Some browsers have numerical indices for the properties, some don't + if(style.length > 0) { + for(var i=0; i