quickredfox · June 9, 2010 21:21
diff --git a/Balise article HTML5, CSSizée aux piments b/Balise article HTML5, CSSizée aux piments
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset=utf-8 />
 <meta name="description" content="description">

 <title>Page Title</title>
 <!--[if IE]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 <style>
 /* Le CSS */
 	body{
 		line-height:1.5em;
 		font-size:16px;
 		font-family:sans-serif;
 	}
 	p:first-letter{
 		/* corrige grammaire */
 		text-transform:capitalize;
 	}
 	
 	article{
 		font-size:1em;
 		display:block;
 		width:30em;
 		padding:0.5em 0.75em;
 		border:1px solid #ccc;
 	}
 	article:before,article header{
 		content:attr(title);
 		font-size:1.25em;
 	}
 	article:after,article footer{
 		content:"publié: " attr(pubdate);
 		font-weight:bold;
 		font-size:0.8em;		
 	}
 	article[data-scriptEnhanced]:before,
 	article[data-scriptEnhanced]:after{
 		display:none;
 	}

 </style>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

 <script type="text/javascript" charset="utf-8">

  $(function() {
    $('article').each(function() {
      var $a = $(this),
        $link = $('<a>').attr(
          {
            href: $a.attr('cite'),
            text: $a.attr('title')
          }, true
        );
      $a.attr('data-scriptEnhanced',true)
        .prepend($('<header>').html($link))
        .append($('<footer>').html('<time>publié: '+$a.attr('pubdate')+'</time>'));      
      
    });
  });

 </script>

 </head>

 <body>


 <article title="Le titre de mon article machin" cite="http://example.com/url/to/article.html" pubdate="2010-06-08T00:00:00Z">
 	<p>le contenu de l'article et un peu de lorem ipsum et <a href="#">un lien pour voir</a> pis kin, un <b>gras</b>!</p>
 </article>
    
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<meta name="description" content="description">

	<title>Page Title</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	/* Le CSS */
	body{
	line-height:1.5em;
	font-size:16px;
	font-family:sans-serif;
	}
	p:first-letter{
	/* corrige grammaire */
	text-transform:capitalize;
	}

	article{
	font-size:1em;
	display:block;
	width:30em;
	padding:0.5em 0.75em;
	border:1px solid #ccc;
	}
	article:before,article header{
	content:attr(title);
	font-size:1.25em;
	}
	article:after,article footer{
	content:"publié: " attr(pubdate);
	font-weight:bold;
	font-size:0.8em;
	}
	article[data-scriptEnhanced]:before,
	article[data-scriptEnhanced]:after{
	display:none;
	}

	</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">

	$(function() {
	$('article').each(function() {
	var $a = $(this),
	$link = $('<a>').attr(
	{
	href: $a.attr('cite'),
	text: $a.attr('title')
	}, true
	);
	$a.attr('data-scriptEnhanced',true)
	.prepend($('<header>').html($link))
	.append($('<footer>').html('<time>publié: '+$a.attr('pubdate')+'</time>'));

	});
	});

	</script>

	</head>

	<body>


	<article title="Le titre de mon article machin" cite="http://example.com/url/to/article.html" pubdate="2010-06-08T00:00:00Z">
	<p>le contenu de l'article et un peu de lorem ipsum et <a href="#">un lien pour voir</a> pis kin, un <b>gras</b>!</p>
	</article>

	</body>
	</html>