StylePort

About

Browsers are quickly transforming into powerful programs which can present pages and applications that we're never dreamed of when the internet was young. Javascript is getting faster, and new ways of presenting websites are being added onto these new browsers. But as these browsers continue to advance there is always going to be a number of users who are using old browsers, or browsers where the developers haven't attempted to conform to web standards.

The new Cascading Styling Sheets standard CSS3, though not finalized, has created a fair amount of interest from developers. Sections are even being implemented in newer browser, such as FireFox 3.5, Opera 10, Chrome 3, and Safari 4. But what about the users who are forced to use IE6(or IE7 or IE8) by their companies, or have kept their older browsers because of hardware limitations, or personal choice? They either recieve a website which doesn't look like the developer intended or the developer is required to spend countless hours trying to create custom versions of their site in order for it to show up properly in all browsers.

By parsing through the CSS code on a website with Javascript it's possible to find CSS styles that are not supported by the browser. Once you know which styles need, then it is possible to emulate them with a Graphics system such as the HTML <canvas> tag(or IE <canvas> tag emulator CanBox). StylePort gives the developer the ability to add in unsupported CSS styles in such a manner. StylePort supports any style that a person can emulate in Javascript, which means that a developer could write custom styles, such as the video example below. StylePort has the ability to take any browser or version of a browser that supports Javascript & DHTML and add CSS standard styles or custom styles that will show up the same way across the board.

Download

Complete Library - Compressed version including StylePort, CanBox and Sizzle
StylePort Zip - Includes StylePort Complete Library, StylePort, CanBox, Sizzle and styles.js

Code Links

StylePort Library - Contains all classes within StylePort

Included Classes: Styles - holds the code for the video, opacity, border-color, and border-image styles

External Libraries

CanBox IE Canvas Emulator
CanBox Emulator v0.2 - Emulates the HTML5 <canvas> tag using DHTML
Homepage
Sizzle JavaScript CSS selector engine
Sizzle Library - Complex CSS Selector Search Library
Homepage Created by John Resig. Licensed Under the MIT License.
Also released under BSD and GPL License

Demos

CSS3 Border-Image example

border image
Search

Different Elements with Border Image Using CSS Class

/*CSS class for following 3 elements */
     .css3 {
          border-image: url(border.png) 27 stretch;
          border:10px double orange;/* backup style */
          width:70px;/*fixes div size */
     }
Table
Test Table
Test Table
Div
Lorem ipsum dolor sit amet. CSS3.info Example

Link Google With Borders SpanThis is some text in a span tag

Opacity style for IE6 7 & 8

/* No more need for ms-filter! */
     #semiopaque{
          opacity:0.25;
          background-color:hsl(0,100%,50%);/*hsl & rgb for background-color in all browsers */
     }

Semi Opaque IE CSS Test

Custom CSS Video Style

/* Inject Custom non-standard CSS Styles */
#videotest{
    video:videourl(http://upload.wikimedia.org/wikipedia/commons/d/d9/Impact_movie.ogg) 500 300 controls ;
}

This is a video test currently only works for Firefox 3.5 & Google Chrome