The Web Without Graphics

With the CSS3 specs showing rounded corners, box shadows and text shadows one has to think, “how long before there is no actual png, gif, or jpg images? How much longer before there is no more ’slicing’?” Take this example. You have a web site that has a main content area with rounded corners, a gradient used for the header and background, and a shadow behind the nav text and a shadow behind the main content.

What if we could write something like this (updated v1.2):

body {
   background:gradient({#000,#fff,#f00},100%) 0 0;
}
#header {
   background:gradient({#303030,#000},100px) -10px 0;
}
   #header #nav li a {
      text-shadow: #000 20px -12px 2px;
   }
#main_content {
   border-radius:10px;
}

Is that really that far off (let’s not take IE into consideration)? I really hope not.

What about something like this?

   #content img {
      orientation:flip-x;
      rotation:20px;
   }

This example is showing the orientation of an element. So in this example, flip-x would flip the image horizontally and the rotation of 20px would be a clockwise rotation and a negative value would have been a counter clockwise rotation. I’m sure there are better ways to do this, but I’m just brainstorming.

Now what about hope for basic shapes? Maybe you want to make a Web 2.0 badge or maybe some cool text effect to show off your new product? What if you could do something like what is shown here at http://www.w3schools.com/svg/femerge_1.svg

Making that is as simply as writing this in the code and it loads instantly!

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
 
<defs>
<filter id="test" filterUnits="objectBoundingBox" x="0" y="0" width="1.5" height="4">
 
	<feOffset result="Off1" dx="15" dy="20"/>
	<feFlood style="flood-color:#ff0000;flood-opacity:0.8"/>
	<feComposite in2="Off1" operator="in" result="C1"/>
 
	<feOffset in="SourceGraphic" result="Off2" dx="30" dy="40"/>
 
	<feFlood style="flood-color:#ff0000;flood-opacity:0.4"/>
	<feComposite in2="Off2" operator="in" result="C2"/>
 
	<feMerge>
		<feMergeNode in="C2"/>
		<feMergeNode in="C1"/>
		<feMergeNode in="SourceGraphic"/>
	</feMerge>
</filter>
</defs>
 
<text x="30" y="100" style="font:36px verdana bold;fill:blue;filter:url(#test)">This is some text!</text>
 
</svg>

Even if you couldn’t code that by hand, think about how much the faster the page would load? That image as a jpg at 80% quality is 16KB and as a SVG? Well, it’s 914 bytes. That’s almost 20x smaller AND at full quality. That’s huge! Oh, and did I say it could scale? It could be made to be SEO and the text could be scaled along with the images and wouldn’t need any “sliding door” hacks to make it work.

How far away do you think we are from this? If we take out IE, do think within a decade? Maybe a littler longer? I’m not 100% sure, but as our computers and Internet speeds get faster and reducing the size of web pages with less images the Internet could be super fast and accessibility would be even better. Slicing times would be cut and semantics at it’s best!

Posted in CSS, Philosophy, Programming, Technology