Posts Tagged ‘css3’

CSS Trick #1

Float clearing can be frustrating for any new front-end developer. If you don’t develop with floated elements, you should–they’re incredibly intuitive and aren’t really that complex. Here’s a great article about the float theory.

That being said, there are several ways you can clear a floated element. Most use some sort of clearfix — but here’s a better way:

Markup:

<div id="wrapper">
	<div id="content">
		<p>Content.</p>
	</div>
	<div id="sub-content">
		<p>Content.</p>
	</div>
</div>

CSS:

#wrapper{
	width:960px;
	overflow:hidden;
}
#content{
	width:65%;
	float:left;
}
#sub-content{
	width:30%;
	float:right;
}

That’s all there is to it. The trick here is pretty simple. It uses the width and overflow declarations on the wrapper DIV element–the resolves the issue and the wrapper now stretches around both contained DIV elements.

Posted in Blog by / March 2nd, 2011 / No Comments »

HTML5 or Flash? Let’s see…

As always, the web is continually evolving, and the latest technology to create a stir in the web development world is HTML5. Simply put, HTML5 is the next version of the Hypertext Markup Language standard for creating Web pages.  The big question lately is: Will HTML5 take over Adobe Flash on the web? The answer is no. However, Apple has openly said that their mobile products will not be supporting Adobe Flash, and Apple would rather see Open Web technologies take their place when needed. With open web projects like WebKit (a completely open-source HTML5 rendering engine) and JQuery (the most popular JavaScript library in use today), there have been new standards set for mobile web browsers. Moreover, the native video element that is included in HTML5 will create simple video embedding, and allow end-users to no longer need a Flash plug-in to view video in their browsers. However, open web technologies can not do everything, like replace Flash games like Brain Freeze–which was created by Boost Media!

But, even if you disagree with Apple’s current position on Adobe Flash, Flash has not proven itself on mobile platforms. Some mobile devices were designed to support Flash, but ended up removing support at the last minute simply because it wasn’t a good experience. Tests have shown that Flash video in browsers on mobile devices create longer load times (the browsers often load the Flash elements first), and creates sluggish scrolling. There is no wonder as to why Adobe, Google, and Apple yearn to create a solution that will work well across a variety of platforms (web and mobile), but users need be aware that there technological realities and politics that thwart that from happening. For more information on HTML5, check out this very imformative infographic:

Posted in Blog by / June 14th, 2010 / No Comments »