Vendor-prefixed CSS Property Overview. Styling ordered list numbers. I’ve always been annoyed by how difficult it is to style the numbers of ordered lists. Quite often a design calls for something other than just a plain figure – a different font, size, colour, background, whatever. The traditional approach to solving this problem has been to prevent the browser from rendering the numbers of the list items (li elements) and instead hard code the numbers in the text content of the li. That makes it possible to add styling hooks to the number and style away until you’re happy. Doing it that way works visually, but it isn’t exactly a semantically correct way of using lists. When you view a faked numbered list with CSS disabled you see either a list with the item numbers repeated or a list with bullets and numbers, and that feels backwards to me.
So when I was recently faced with styling list numbers once again I thought I’d have another go at doing it without faking the numbers. The CSS used on the demo page is this: The key parts are the following: The Essential Guide to @font-face. Fonts on the Web The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them.
Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography. There is, as of yet, no consensus in this ever-evolving game. All of these methods have perfectly valid arguments both for and against their use. Further, even the most popular browsers support each of these technologies in widely varying degrees. However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs. Licensing and Free Fonts The Basic Syntax. Fighting the @font-face FOUT. FOUT is what I’m calling the flash of unstyled text that you get while using @font-face in Firefox and Opera.
Heads up, lots of things have changed around this stuff. check out all the updates on this post! In June, Remy Sharp documented the how a browser progressively renders a page using @font-face. Things work differently between browsers natch: Here’s how in Firefox; basically the text is in a default webfont until the custom font is ready: Webkit takes a very different approach, and very intentionally. They believe it’s better to keep the text invisible until the font is ready.
This way, there is no moment where the text flashes into its newly upgraded self. I really don’t like the text upgrade FOUT, so I personally prefer webkit’s technique. Best practices for serving fonts: Minimize the overall kilobyte size of your font file. When exactly do browsers download the font file? Garrick at Kernest tipped me off to IE’s interesting behavior here.
In what cases will you get a FOUT. FOUT-B-Gone — Demo. This page demonstrates the “onload” method, which is the most reliable but slower than “asap.” To see how this script performs make sure you are viewing this on Firefox 3.5/3.6 or Internet Explorer 7–9. Other browsers will not see any differences in web font loading. *Web font load time is still dependent on the font server download speed. Installing FOUT-B-Gone Begin by downloading the foutbgone.js, and inserting it in the head of your document after your CSS calls. Using FOUT-B-Gone The simplest initialization will look like this: fbg.hideFOUT('asap'); FOUT-B-Gone hides elements with custom fonts assigned to them. Fbg.hideFOUT('asap', 400); Putting it all together: <script src="foutbgone.js" type="text/javascript"></script>\ <script type="text/javascript">\ fbg.hideFOUT('asap', 400);\ </script> Configuring FOUT-B-Gone Option Default Description method asap fbg.hideFOUT('asap');fbg.hideFOUT('onload'); delay 100 (ms) fbg.hideFOUT('asap', delay);fbg.hideFOUT('onload', delay);
EOTFast - Convert TTF to EOT, Fast. Improving the Performance of your HTML5 App. Introduction HTML5 gives us great tools to enhance the visual appearance of web applications. This is especially true in the realm of animations. However, with this new power also come new challenges. Actually these challenges aren't really that new and it might sometimes make sense to ask your friendly desk neighbor, the Flash programmer, how she has overcome similar things in the past. Anyway, when you work in animation it becomes hugely important that users perceive these animations to be smooth. This article will try to give you the tools and techniques to work on improving the experience of your own application.
The Strategy By no means do we want to discourage you from building awesome, stunningly visual apps with HTML5. Then when you notice that performance could be a little better, come back here and read up on how you can improve the elements of your application. Visual fidelity++ with HTML5 Hardware Acceleration These aspects of your document can be accelerated by the GPU: Profiling. CSS transitions. This is an experimental technologyBecause this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes. CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
For example, if you change the color of an element from white to black, usually the change is instantaneous. Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. Which CSS properties are animatable? The Web author can define which property has to be animated and in which way. Also the auto value is often a very complex case.
HTML Content. Visualize and manipulate CSS transition functions. Element Rotation with CSS Transformations. I've gone on a million rants about the lack of progress with CSS and how I'm happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations allow us to rotate elements on a 360 degree axis. Rotating elements is a breeze too -- take a look. The Mozilla CSS -moz-transform:rotate(120deg); The CSS property is denoted as Mozilla-only with the "-moz" prefix. -moz-transform:rotate(120deg); -moz-transform:skewx(25deg) translatex(150px); The WebKit CSS -webkit-transform:rotate(120deg); Obviously WebKit uses the "-webkit" prefix. The Opera CSS -o-transform:rotate(120deg); Opera uses its standard o- prefixed property to signal the transform. The Internet Explorer CSS Microsoft has implemented a -ms prefix for the transform: -ms-transform:rotate(120deg); The CSS snippet above works well within IE9, but IE8 and lower require some filter magic: That's about it.
Supported CSS3 Features – CSS3 PIE: CSS3 decorations for IE. The following sections describe in detail the exact levels of support PIE has for certain CSS3 properties and value types. border-radius PIE fully supports the border-radius property syntax as defined in the CSS3 Backgrounds and Borders module specification for IE 6-8. IE 9 and up support border-radius natively so PIE does nothing. border-radius: [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
Only the shorthand version is supported; the longhand border-top-left-radius etc. properties are not. Border-radius: 5px 10px 15px 20px; (top-left, top-right, bottom-right, bottom-left). The rounded corners are applied to the element's background area (including solid background colors, background images, and background gradients), the element's border, and the box-shadow if specified. Both the standard border-radius property name as well as a custom prefixed -pie-border-radius property name are recognized; if both are present then the prefixed value will take precedence. CSS3 text-shadow in IE10 - IEBlog.
IE10 in the Windows Developer Preview introduces support for hardware-accelerated CSS3 text-shadow. Text-shadow is one of the top requested features from Web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text. Text-Shadow in IE10 As its name suggests, text-shadow is a CSS property that draws a shadow behind text. Example of a purple text-shadow behind text Use it to draw attention to text and to give the text some depth. Example: a subtle text-shadow appears when navigating to Twitter in IE9 (left) and IE10 (right) Example: text-shadow appears when navigating to an auto service Web site in IE9 (left) and IE10 (right) IE10 supports the same definition of <shadow> across box-shadow and text-shadow as called out in the text-shadow spec: “<shadow> is the same as defined for the ‘box-shadow’ property except that the ‘inset’ keyword is not allowed.”
How to Use Text-Shadow .shadow7 { Css - How can you create a CSS3 gradient in Opera. CSS3 jQuery style menu. RGBa Browser Support. This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers. RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks like this: This allows us to fill areas with transparent color; the first thee numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all decendant elements to also become transparent and there is no way to fight it (except weird positional hacks) Cross-browser opacity is also a bit sloppy.
With RGBa, we can make a box transparent and leave its descendants alone: Declaring a fallback color Not all browsers support RGBa, so if the design permits, you should declare a "fallback" color. Do be aware of this bug though, related to not using shorthand in IE 6 and 7. CSS3 buttons by Chad Mazzola.