Patrick Haney notasausage

Some early thoughts on img@srcset in the real world

Many agree that the newly proposed srcset attribute is much less syntactically intuitive than the widely appreciated picture element. I hope that the WHATWG and W3C review all of the efforts that the web dev community have put into the picture element proposal in their own community group and go back on this recent addition.

Syntax aside... if srcset was here to stay regardless of what we want, is there any way we could make it work in existing browsers without introducing unnecessary overhead or potentially buggy markup? At a glance, it looks shaky to me.

The main problem is request overhead, and attempting to work around that.

Given the following markup, existing browsers will prefetch/fetch the image referenced in the src attribute, and JavaScript can not prevent that request from going out. This means larger screen devices will request an unnecessary image for every imgset on a page - not good.

Working With Github Pages

The FAQ maintained by Github covers most stumbling blocks, some other tips and tricks supplied here.

Gitignore

Add _site to .gitignore. The generated site should not be uploaded to Github since its gets generated by github.

Working With Code Partials

I wrote this fairly straightforward cross-browser linear gradient mixin:

@mixin gradient($from-color, $to-color) {
	background-color: mix($from-color, $to-color); /* Fallback */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from-color), to($to-color));
	background-image: -webkit-linear-gradient(top, $from-color, $to-color); 
	background-image:    -moz-linear-gradient(top, $from-color, $to-color);
	background-image:     -ms-linear-gradient(top, $from-color, $to-color);
	background-image: -o-linear-gradient(top, $from-color, $to-color);

	<?php

	/**
	* Fix compatibility issues with The Event Calendar and Posts 2 Posts WordPress Plugins
	* Issue arrises with how nested select queries function when P2P expects a single column.
	*/

	function tribe_to_p2p_pre_get_posts_20121001( $query ){
	if(isset($query->_p2p_capture) && $query->_p2p_capture) {
	add_filter( 'posts_fields', 'tribe_to_p2p_setupFields_20121001', 20);

	// Declare the color as RGB; SASS will treat this as hex
	$green: rgb(27,224,63);
	// Declare an alpha
	$alpha: .5;
	// Declare another color variable as a color with an alpha
	$greenAlpha: rgba($green, $alpha);

	body {
	/* As RGB (which SASS actually ouputs as HEX) */
	background: $green;

	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="windows-1252">
	<title>Keep webform data persistent</title>
	<!-- jQuery CDN -->
	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<style type="text/css">
	/Float the form labels to the left and allow them 40% of the width of the form/

	<style>
	/* ... */
	/--- Preheader declaration in style block in addition to inline for Outlook /
	.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
	</style>
	</head>

	<body>
	<!-- PRE-HEADER TEXT -->
	<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, & more: 75 text char limit</span>

	<!--

	Progressive Disclosure Demo - Updated 15 August, 2012 by Ros

	Thank you for taking a look under the hood of our progressive disclosure demo. Please note that this is a work in progress, so it's a tad messy and bound to change.

	If you have any questions, feel free to pop a line to [email protected] - we might learn something, too!

	Known bugs
	----------

	...
	// test for font-face version to load via Data URI'd CSS
	// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
	var fonts = ns.files.css.fontsWOFF,
	ua = win.navigator.userAgent;

	// android webkit browser, non-chrome
	if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
	fonts = ns.files.css.fontsTTF;
	}

	<!--[if mso]>
	<center>
	<table><tr><td width="580">
	<![endif]-->
	<div style="max-width:580px; margin:0 auto;">

	<p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>

	</div>
	<!--[if mso]>