CSS Modal follow up

Paul Hayes — Tue, 26 Apr 2011 21:43:51 +0000

In my original post I explained how to create a CSS only modal pop-up using :target, pseudo-elements and pointer events. This had a number of caveats, any browser that didn’t support pointer events would see a non-clickable page and the forward/back controls would navigate through dialogues, which is usually undesirable. Of course it was only an experiment.

My comment form had been much neglected and it felt like the perfect opportunity to try out this modal in a real environment. Click the “Post a comment” link to see it in action.

All references to the :target pseudo-selector have been removed, instead an “active” class is toggled using JavaScript. The CSS modal still uses an opacity transition but pointer events are gone. The default is now display:none with an intermediate state that renders the modal as display:block (remember it still begins at opacity: 0).

The flow is:

Add an intermediate class to trigger the modal elements above everything, with opacity 0.
Add an active class to trigger animation and transition to full opacity.
On close, remove active class, add minimise class to trigger minimise animation and transition to opacity 0.
Remove intermediate class.

Onclick handlers are added to the “post comment” links to add classes and to the close link to remove them. When opened a handler is added to the body to listen for the ESC key, which closes the modal. The first input in the modal is focused on open.

I took the opportunity to play with some HTML5 features. The comment form now uses placeholder attributes, and if supported, labels are hidden. The feature detection is delightfully simple:

supportPlaceholder: function() {
	  var i = document.createElement('input');
	  return 'placeholder' in i;
}()

See Dive into HTML5 for more.

The close link text which has an :after pseudo-element (i.e. the X) is no longer hidden, instead it becomes the cancel link and is essential for browsers that can’t comprehend generated content.

In webkit you’ll see the modal bounce in and minimise out (smoothly in Safari and iOS). In Firefox you’ll get an opacity transition and in IE the modal will just appear or disappear. In IE8 and below the page is not greyed out due to lack of rgba support. I’m fine with this. This is still a bit of a trial to see how people actually use the modal and what problems it might throw up.

In conclusion, with JavaScript much of the mechanical new CSS can be dropped and with a slightly more complicated class toggle system we achieve cross browser support, without sacrificing that lovely hardware accelerated CSS animation.

Still want that animation cross browser? I recommend looking into Faruk Ateş’s Runloop jQuery plugin which gives you keyframed animations in any browser.

In other news, I’ve tidied up the comments layout a little and added a short books category with a selection of books I highly recommend.

Moving markup towards HTML5

Paul Hayes — Wed, 10 Jun 2009 23:03:31 +0000

Having read John Resig’s “HTML5 Shiv” article and Remy Sharp’s “HTML5 enabling script”, it felt like the right time to begin the full fledged migration from XHTML to a cross browser compatible HTML5 blog. All in all the process of updating the templates was painless, taking about an hour or so to modify the WordPress Sandbox theme.

To enable IE6 and IE7 support for new HTML5 tags, which are not naturally styled, some JavaScript is necessary. As per the ‘shiv’ article, Remy Sharp has a small script that creates DOM elements, one for each type of new HTML5 tag, the simple act of doing so leads Internet Explorer to apply styles to said tags. I slightly modified the existing script to add the recently proposed hgroup.

Even though these tags accept style they don’t come with their default renderings. For that we need a bit of CSS to make block elements behave as they should.

(function(){
	if(!/*@cc_on!@*/0) return;
	var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,
		eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,
		progress,section,time,video".split(','),i=0,length=e.length;
	while(i
article, aside, dialog, footer, header, section, footer, nav, figure {
	display: block;
}

I’ve also updated the Eric Meyer reset script, removing now deprecated HTML 4 tags and applying reset to the new elements, so they do not unexpectedly inherit padding, margin, etc. in the future. These changes are not yet exhaustive.
Moving onto the page’s actual markup, the new DOCTYPE and character encoding settings are remarkably simple. Standards based web development is getting easier. For browsers that do not support HTML5, the new DOCTYPE still triggers standards mode. The xmlns HTML attribute is no longer necessary and the profile attribute has been dropped.



	
	FofR Online

The header section has been placed in the appropriate 
 tags, and similarly with the footer. I’d hoped to include the ‘About Me’ section within this, but as part of the specification you cannot include headings within a  element.
Each of the posts comes wrapped in an 
 tag, i.e. an independent element with content that could standalone. Within are the respective  (containing title and date) and  (containing meta links)  elements. Technically the meta links could be marked as , but the former is more fitting and still acceptable use.
The date makes use of HTML5’s  element, with a datetime attribute that gives the precise posting time, including timezone offset.
The previous and next links that follow the article can comfortably sit within a 
 tag. Similarly, my sidebar region is predominantly navigation based with lists of archives and categories, it’s been marked as such.

	
		POST TITLE
		
			April 30, 2009 – 3:54 pm
		
	
	
		POST
	
	
		META LINKS
	



	
	


One avenue I should explore is the inclusion of the 
 tag, which I’d like to break up individual posts, probably by splitting the content at level three headings downwards; thereby becoming the header of each new section.
It’ll be a while before the real benefits of HTML5 can be fully appreciated by everyone, but it feels good to make a start, however small that step may be.

Paul Hayes » html5

CSS Modal follow up

Moving markup towards HTML5