programming4us
 
 
 
Programming

CSS for Mobile Browsers : WebKit Extensions (part 1) - Text Stroke and Fill

12/19/2010 4:15:54 PM
The open source project WebKit added many extensions to CSS, and several of these are under discussion for addition to CSS3. In the mobile world we have many WebKit flavors (Safari, Android, webOS, Symbian, etc.), and the extensions compatibility isn’t perfect across all of them.

Note:

Many of the WebKit extensions had counterparts for other desktop browsers, like Mozilla Firefox (using the -moz- prefix) or Opera (using the -o- prefix). In CSS3, many of these extensions are implemented without any prefix.


The following is a list of the most common WebKit extensions, in compressed form:

  • -webkit-border-radius defines a rounded-corner box. Modern mobile browsers also understand it as border-radius.

  • -webkit-box-shadow defines a shadow for a block element (similar to text-shadow).

  • -webkit-columns specifies the width and count of columns.

  • -webkit-border-image specifies an image to use as the border for a box

  • -webkit-text-stroke defines a color to use for the stroke (outline) of the text.

  • -webkit-text-fill-color defines a color to use for filling the text (inside the stroke).

We’ll look at a few of them here in more detail.

1. Text Stroke and Fill

The stroke and fill properties are a handy way of creating fancy effects in titles (with big fonts) without the use of images. For example:

<h1 style="-webkit-text-stroke: blue; -webkit-text-fill-color: yellow">
Great Title!
</h1>

Table 1 shows which browsers render these two extensions.

Table 1. Text stroke and fill compatibility table
Browser/platformText stroke and fill compatibility
SafariYes
Android browserYes
Symbian/S60Only fill from 5th edition No support before 5th edition
Nokia Series 40No
webOSOnly fill
BlackBerryNo
NetFrontNo
Openwave (Myriad)No
Internet ExplorerNo
Motorola Internet BrowserNo
Opera MobileNo
Opera MiniNo
Other -----------------
- jQuery 1.3 : Working with numeric form data (part 9) - The finished code
- jQuery 1.3 : Working with numeric form data (part 8) - Editing shipping information
- jQuery 1.3 : Working with numeric form data (part 7) - Deleting items
- jQuery 1.3 : Working with numeric form data (part 6) - Finishing touches
- jQuery 1.3 : Working with numeric form data (part 5)
- jQuery 1.3 : Working with numeric form data (part 4) - Dealing with decimal places
- jQuery 1.3 : Working with numeric form data (part 3) - Parsing and formatting currency
- jQuery 1.3 : Working with numeric form data (part 2)
- jQuery 1.3 : Working with numeric form data (part 1) - Shopping cart table structure
- The Art of SEO : Controlling Content with Cookies and Session IDs
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 5) - The Freehand Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 4) - The Ellipse and Rectangle Tools
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 3) - The Line Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 2) - The Pencil Tool
- iPad SDK : New Graphics Functionality - We Are All Tool Users (part 1)
- Security-As-a-[Cloud] Service : Today’s Offerings
- CSS for Mobile Browsers : CSS Sprites
- CSS for Mobile Browsers : Common Patterns (part 4)
- CSS for Mobile Browsers : Common Patterns (part 3) - Titles and Pseudoclasses
- CSS for Mobile Browsers : Common Patterns (part 2) - Rounded corners
 
 
Video tutorials
- How To Install Windows 8 On VMware Workstation 9

- How To Install Windows 8

- How To Install Windows Server 2012

- How To Disable Windows 8 Metro UI

- How To Change Account Picture In Windows 8

- How To Unlock Administrator Account in Windows 8

- How To Restart, Log Off And Shutdown Windows 8

- How To Login To Skype Using A Microsoft Account

- How To Enable Aero Glass Effect In Windows 8

- How To Disable Windows Update in Windows 8

- How To Disable Windows 8 Metro UI

- How To Add Widgets To Windows 8 Lock Screen
programming4us programming4us
 
Top 10
 
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS