<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: Of Site Styles and CSS Columns</title>
	<atom:link href="http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/feed/" rel="self" type="application/rss+xml" />
	<link>http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/</link>
	<description>Things that Eric A. Meyer, CSS expert, writes about on his personal Web site; it&#039;s largely Web standards and Web technology, but also various bits of culture, politics, personal observations, and other miscellaneous stuff</description>
	<lastBuildDate>Fri, 19 Mar 2010 00:27:46 -0400</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: Max Design - standards based web design, development and training  &#187; Blog Archive   &#187; Some links for light reading (24/8/04)</title>
		<link>http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/#comment-11632</link>
		<dc:creator>Max Design - standards based web design, development and training  &#187; Blog Archive   &#187; Some links for light reading (24/8/04)</dc:creator>
		<pubDate>Sun, 01 Jan 2006 20:33:52 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/#comment-11632</guid>
		<description>[...] 8217; Law and Text Links 	Line length 	Why Your Client Cares About Web Standards 	CSS 101 	Of Site Styles and CSS Columns  			 				Posted in light reading [...]</description>
		<content:encoded><![CDATA[<p>[...] 8217; Law and Text Links 	Line length 	Why Your Client Cares About Web Standards 	CSS 101 	Of Site Styles and CSS Columns<br />
 				Posted in light reading [...]</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: CSS3 Columns &#60;Anne's Weblog about Markup &#38; Style&#62;</title>
		<link>http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/#comment-699</link>
		<dc:creator>CSS3 Columns &#60;Anne's Weblog about Markup &#38; Style&#62;</dc:creator>
		<pubDate>Wed, 30 Nov -0001 00:00:00 +0000</pubDate>
		<guid isPermaLink="false">http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/#comment-699</guid>
		<description>[...] Test  About  Contact    Weblog (Atom)  HREF (Atom)  CSS3 Columns 	You probably have read &lt;a href=&quot;http://www.meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/&quot;&gt;Of Site Styles and CSS Columns&lt;/a&gt; and if not, you should. Eric Meye [...]</description>
		<content:encoded><![CDATA[<p>[...] Test  About  Contact    Weblog (Atom)  HREF (Atom)  CSS3 Columns 	You probably have read <a href="http://www.meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/">Of Site Styles and CSS Columns</a> and if not, you should. Eric Meye [...]</p>
]]></content:encoded>
	</item>
</channel>
</rss>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head profile="http://gmpg.org/xfn/1">
<title>meyerweb.com</title>
<link rel="openid.server" href="http://www.myopenid.com/server">
<link rel="openid.delegate" href="http://emeyer.myopenid.com/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="shortcut icon" href="/favicon.ico"><link rel="home" href="http://meyerweb.com/" title="Home" ><link rel="stylesheet" href="http://meyerweb.com/ui/meyerweb.css" type="text/css" media="screen, projection"><link rel="stylesheet" href="http://meyerweb.com/ui/theme.css" type="text/css" media="screen, projection" id="themeLink"><link rel="stylesheet" href="http://meyerweb.com/ui/print.css" type="text/css" media="print"><script src="http://meyerweb.com/ui/addresses.js" type="text/javascript"></script><link rel="stylesheet" href="/ui/wordpress.css" type="text/css" media="screen">
<link rel="stylesheet" href="/ui/tfe.css" type="text/css" media="screen">
<link rel="stylesheet" href="/ui/home.css" type="text/css" media="screen">
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric" href="/eric/thoughts/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only technical posts)" href="/eric/thoughts/category/tech/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Thoughts From Eric (only personal posts)" href="/eric/thoughts/category/personal/rss2/full" />
<link rel="alternate" type="application/rss+xml" title="Distractions" href="/eric/thoughts/recent-links/rss2" />
<link rel="alternate" type="application/rss+xml" title="Excuse of the Day" href="/feeds/excuse/rss20.xml" />
</head>
<body id="www-meyerweb-com" class="hpg">

<div id="sitemast"><h1><a href="/"><span>meyerweb</span>.com</a></h1></div><div id="search"><h4>Exploration</h4><!-- SiteSearch Google --><form method="get" action="http://www.google.com/custom" target="_top"><div><input type="hidden" name="domains" value="meyerweb.com"></input><label for="sbb" style="display: none">Submit search form</label><input type="submit" name="sa" value="Google Search" id="sbb"></input><label for="sbi" style="display: none">Enter your search terms</label><input type="text" name="q" size="31" maxlength="255" value="" id="sbi"></input><p><input type="radio" name="sitesearch" value="meyerweb.com" checked id="ss1"></input><label for="ss1" title="Search meyerweb.com">meyerweb.com</label><input type="radio" name="sitesearch" value="" id="ss0"></input><label for="ss0" title="Search the Web">Web</label></p><input type="hidden" name="client" value="pub-3772084027748653"></input><input type="hidden" name="forid" value="1"></input><input type="hidden" name="ie" value="ISO-8859-1"></input><input type="hidden" name="oe" value="ISO-8859-1"></input><input type="hidden" name="safe" value="active"></input><input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input><input type="hidden" name="hl" value="en"></input></div></form><!-- SiteSearch Google --><!-- <form method="get" action="http://www.google.com/custom"><div><input type="submit" name="sa" value="Search"><input type="text" name="q" size="20" maxlength="255" value=""><input type="hidden" name="sitesearch" value="meyerweb.com"></div></form><small><a href="http://www.google.com/search">Powered by Google</a></small> --></div><div id="main"><div class="skipper">Skip to: <a href="#extra">site navigation/presentation</a></div><div class="skipper">Skip to: <a href="#thoughts">Thoughts From Eric</a></div>
<div id="thoughts">


<div class="entry">
<h3><a href="http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/" rel="bookmark" title="Permanent Link: Of Site Styles and CSS Columns">Of Site Styles and CSS Columns</a></h3>
<ul class="meta">
<li class="date">Wed 18 Aug 2004</li>
<li class="time">2313</li>
<li class="cat"><a href="http://meyerweb.com/eric/thoughts/category/tech/browsers/" title="View all posts in Browsers" rel="category tag">Browsers</a><br> <a href="http://meyerweb.com/eric/thoughts/category/tech/css/" title="View all posts in CSS" rel="category tag">CSS</a></li>
<li class="cmt"><a href="http://meyerweb.com/eric/thoughts/2004/08/18/of-site-styles-and-css-columns/#comments">Two responses</a></li>
<li>Posting off</li><li></li></ul>

<div class="text">
<p>
Thanks to a post over at Simon&#8217;s weblog, I discovered that the <a href="http://www.mozilla.org/releases/mozilla1.8a3/README.html">Mozilla 1.8a3 readme file</a> tells us of some interesting CSS-related developments:
</p>
<ul>
    <li>Users can now disable CSS via Use Style > None or a global preference (<a href="http://bugzilla.mozilla.org/show_bug.cgi?id=32372">bug 32372</a>.)</li>
    <li>Mozilla now supports a at-rule for matching on site/document URL. Among other things, this makes site-specific user style rules possible (<a href="http://bugzilla.mozilla.org/show_bug.cgi?id=238099">bug 238099</a>.)</li>
    <li>Preliminary support for CSS columns has been checked in to Mozilla <a href="http://bugzilla.mozilla.org/show_bug.cgi?id=251162">bug 251162</a>.)</li>
</ul>
<p>
The middle of the three is what Simon wrote about, and it&#8217;s indeed very cool.  <a href="http://archivist.incutio.com/viewlist/css-discuss/13291" title="[css-d] CSS signatures">CSS signatures</a> would never have been necessary if browsers had always supported per-site styles.  I&#8217;m not entirely thrilled about the syntax, but it&#8217;s a good start.  And for those who are wondering how I could support a non-standard extension, I&#8217;ve never been against them as long as they were clearly marked as such.  Microsoft&#8217;s extensions (<code>behavior</code>, <code>filter</code>, the scrollbar stuff) weren&#8217;t, which inevitably led to confusion.  The Mozilla stuff is marked in such a way that you can tell it&#8217;s an extension, and in a way that won&#8217;t conflict with future CSS.
</p>
<p>
I&#8217;m happy to see that Mozilla will finally let users easily disable CSS.  For those who need the text view, say because they have poor vision, it will be a welcome feature.  For those who want to quickly check the document&#8217;s unstyled rendering, it will be similarly useful.
</p>
<p>
But I&#8217;m most intrigued by the addition of &#8220;preliminary&#8221; support for CSS columns.  This would allow you to declare that a given element&#8217;s content should be flowed into columns, complete with auto-balanced heights and everything.  For example, if you wanted a list flowed into two columns, you could declare:
</p>
<pre>
ul {-moz-column-count: 2;}
</pre>
<p>
That would split the contents of every undordered list into two halves, filling the first column with the first half of the list and the second column with the second half.  Thoroughly awesome.  See <a href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118/" title="CSS3 module: Multi-column layout">the CSS multi-column layout module</a> for more details, although I don&#8217;t know how much Mozilla actually supports at this juncture.
</p>
<p>
<ins datetime="2004-08-2510:28:17-04:00"><strong>Update:</strong> it turns out that column support isn&#8217;t present in Mozilla 1.8a3, contrary to the release notes.  I&#8217;ve been told that it will be present in 1.8a4.</ins>
</p></div>

</div>

</div>
<p style="font-size: 90%; text-align: right; margin-top: 0.5em; padding-top: 0;">(If you care, there's even an <a href="/eric/thoughts/page/2/">archive of previous thoughts</a>...)</p>

</div><div id="extra"><div class="panel" id="archipelago"><h4>Identity Archipelago</h4><ul><li><a href="http://flickr.com/photos/meyerweb/" rel="me">Flickr</a></li><li><a href="http://twitter.com/meyerweb/" rel="me">Twitter</a></li><li><a href="http://dopplr.com/traveller/meyerweb">Dopplr</a></li><li><a href="http://www.linkedin.com/in/meyerweb" rel="me">LinkedIn</a></li><li><a href="http://technorati.com/profile/emeyer" rel="me">Technorati</a></li></ul></div><div class="panel" id="pointers"><h4>Projects Elsewhere</h4><ul><li><a href="http://aneventapart.com/">An Event Apart</a></li><li><a href="http://complexspiral.com/">Complex Spiral Consulting</a></li><li><a href="http://www.webassist.com/go/css/emeyer/">CSS Sculptor</a></li><li><a href="http://css-discuss.org/">css-discuss</a></li><li><a href="http://microformats.org/">Microformats</a></li><li><a href="http://s5project.org/">S5</a></li></ul></div><div class="panel" id="tour"><ul><li><a href="http://fray.com/issue3/"><img src="http://fray.com/images/i3c.gif" alt="Fray Contributor (Issue 3: Sex &amp; Death)" /></a></li><!-- <li><a href="http://www.webassist.com/go/css/emeyer/"><img src="/pix/CS_ad_180x109.jpg" alt="CSS Sculptor for Dreamweaver" style="max-width: 100%;" /></a></li> --></ul></div><div class="panel">
<h4>Recently Tweeted</h4>
<p class="more"><a href="http://twitter.com/meyerweb">see more</a></p>
<p>I think the fortune in my Chinese fortune cookie was written by Grover Norquist.  I bet he's getting paid for those off the books. <small>&#8211;tweeted 22 hours, 14 minutes ago</small></p>
</div><div id="sideblog" class="panel">
<h4>Distractions</h4>
<p class="more">
<a href="/eric/thoughts/recent-links/">archive</a>
</p>
<ul>
<li><a href="http://tweetagewasteland.com/2010/03/my-head-is-in-the-cloud/" title="March 18 | &#8220;I sense that my addiction to the realtime stream is only making room for the consumption of a faster stream.&#8221;">My Head is in the Cloud</a> <small>[via <a href="http://daringfireball.net/">John</a>]</small></li>
<li><a href="http://8bitnyc.com/" title="March 17 | All of a sudden I want to establish a mission in Central Park and negotiate with the natives for gold and food.">8-Bit NYC</a></li>
<li><a href="http://www.youtube.com/watch?v=nFicqklGuB0&amp;feature=player_embedded" title="March 12 | Wry comment expressing my appreciation of the creative derivativeness of this video and its uncanny accuracy in mocking common tropes.">Academy Award Winning Movie Trailer</a></li>
<li><a href="http://www.youtube.com/watch?v=414TmP12WAU" title="March 9 | &#8220;Apple juice&#8230; for half price!&#8221;  More like twice PRICELESS.  (Note: If you&#8217;re at work, don your headphones.)">Happy in Paraguay</a> <small>[via <a href="http://unstoppablerobotninja.com/">Ethan</a>]</small></li>
<li><a href="http://www.youtube.com/watch?v=9V5ubAOeOBk&amp;feature=player_embedded" title="February 10 | This is approximately the best thing ever.">U900 -Walk Don&#8217;t Run (Isogabamaware)</a></li>
<li><a href="http://www.456bereastreet.com/archive/201002/sifr_default_css_hides_content_from_at_least_one_screen_reader/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A 456bereastreet %28456 Berea Street%29" title="February 8 | -9999px comes through again, but I really wish we were beyond that kind of thing.">sIFR default CSS hides content from at least one screen reader</a></li>
<li><a href="http://www.macosxhints.com/article.php?story=20100117064356428" title="February 8 | Storing this for future use.">Take a picture with the iSight camera when a folder is opened</a></li>
<li><a href="http://mingle2.com/blog/view/web-developer-mind" title="February 4 | Mostly valid.  (SEE WHAT I DID THERE?)">The Mind of a Web Developer: An Illustrated Diagram</a></li>
<li><a href="http://www.theonion.com/content/news/science_channel_refuses_to_dumb" title="January 28 | &#8220;Punkin Chunkin, for Christ&#8217;s sake&#8230; What more do you people want?&#8221;">Science Channel Refuses To Dumb Down Science Any Further</a></li>
<li><a href="http://www.mailchimp.com/blog/project-omnivore-declassified/" title="January 27 | Sounds like quite a feat.  But I wonder how we&#8217;d feel if Microsoft or Google announced the same kind of thing on their e-mail services.">MailChimp&#8217;s Project Omnivore: Declassified</a></li>
<li><a href="http://www.politifact.com/truth-o-meter/statements/2010/jan/25/carolyn-maloney/congresswoman-says-democratic-presidents-create-mo/" title="January 26 | &#8220;Obviously, luck matters a lot, but when there is a consistent pattern over more than 60 years, it starts to look like more than just luck.&#8221;">Congresswoman says Democratic presidents create more private-sector jobs</a></li>
<li><a href="http://www.ted.com/talks/taylor_mali_what_teachers_make.html" title="January 25 | Truth.">Taylor Mali: What teachers make</a></li>
<li><a href="http://notebook.johnmartz.com/how-websites-work?c=1" title="January 22 | At last, the truth is out and I can stop pretending:  beatific monkeys are what makes it all go.">How websites work</a></li>
</ul>
</div>
<div class="panel" id="advisory">
<div class="guarded">
<a href="http://blogadvisorysystem.com/"><img src="/pix/bas/guarded.png" alt="Blog Advisory System Alert Level: Guarded"></a>
</div>
</div>

<div class="panel" id="excuse">
<h4>The <a href="/feeds/excuse/">excuse of the day</a> is</h4>
<p>neutrino interactions</p>
</div>

<div class="panel" id="extras">
<h4>Extras</h4>
<ul>
<li><a href="/feeds/">Feeds</a> &#8226;</li>
<li><a href="/eric/faq.html">FAQ</a> &#8226;</li>
<li><a href="/family.html">Family</a></li>
</ul>
</div>

</div>

<div id="navigate">
<h4>Navigation</h4>
<ul id="navlinks">
<li id="archLink"><a href="/eric/thoughts/">Archives</a></li>
<li id="cssLink"><a href="/eric/css/">CSS</a></li>
<li id="toolsLink"><a href="/eric/tools/">Toolbox</a></li>
<li id="writeLink"><a href="/eric/writing.html">Writing</a></li>
<li id="speakLink"><a href="/eric/talks/">Speaking</a></li>
<li id="otherLink"><a href="/other/">Leftovers</a></li>
<li id="aboutsite"><a href="/ui/about.html">About this site</a></li>
</ul>
</div>

<div id="footer">
<p class="sosumi">All contents of this site, unless otherwise noted, are &copy;1995-2008 <strong>Eric A. and Kathryn S. Meyer</strong>.  All Rights Reserved.</p>
<p>"<a href="/eric/thoughts/">Thoughts From Eric</a>" is powered by the &uuml;bercool <a href="http://wordpress.org/">WordPress</a></p>
</div>
</body>
</html>
