background preloader

HTML5 Reset Stylesheet

HTML5 Reset Stylesheet
Related:  CSS

CSS Masks WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. Here is a snapshot of the Speed Racer movie trailer clipped to the Safari compass icon. This is in fact a mask applied to the <video> element. We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image) Use of a mask results in a stacking context being created (similar to how opacity and transforms work). Here are two sample images. The result looks like this:

Atomic CSS Dive Into HTML5 CSS Reference style-rule ::= selectors-list { properties-list } ... where : selectors-list ::= selector[:pseudo-class] [::pseudo-element] [, selectors-list] properties-list ::= [property : value] [; properties-list] See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each specified value depends on the data type defined for each specified property. Style rule examples For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. An Introduction To Object Oriented CSS (OOCSS) Advertisement We explore how to craft flexible front-end design patterns and making future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now → Have you ever heard the phrase “Content is King”? From a Web developer’s perspective, however, some may argue that speed is king1. Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas5. In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages. The Principles Of OOCSS Link As with any object-based coding method, the purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain. As described on the OOCSS GitHub repo’s Wiki page6, OOCSS is based on two main principles. Faster Websites Link

HTML5 Server-Push Technologies, Part 1 The upcoming HTML5 specification includes a lot of powerful and exiting features which turn web browsers into a fully capable rich internet application (RIA) client platform. This article takes a deeper look into two new HTML5 communication standards, Server-Sent Events and WebSockets. These new standards have the potential to become the dominant Server-push technologies for helping developers to write real-time web applications. 1. Since its beginning in the 1990s, the World Wide Web has grown rapidly and became more and more dynamic. The Hypertext Transfer Protocol (HTTP) was designed in the early days of the internet to transport information entities such as web pages or multimedia files between clients and servers. The HTTP protocol implements a strict request-response model, which means that the client sends a HTTP request and waits until the HTTP response is received. Listing 1. GET /html/rfc2616.html HTTP/1.1Host: tools.ietf.orgUser-Agent: xLightweb/2.11.3 Listing 2. <! Listing 3.

Four Sided PNG Drop Shadows [revised and improved] Are complex CSS issues making your programmers crazy? I've provided advanced CSS consulting for Milo and many other big sites. Hire me to help you too. Big John's CSS Webinars! Let Big John (yours truly) teach you about CSS in a setting where you can actually ask questions. Besides upcoming webinar dates, you can also download recorded versions of previous webinars (some free, some for sale). Return to ArticlesReturn to p.i.e. This article has been revised as of May 2009 to add improvements to the method which make it possible to have only a single drop shadow image, rather than the three that were required in the original version. This new simplified version of the method was inspired by a question from Antonio Vong, who asked if it was possible to make it work with only one big shadow image. Special Notice: I've written a tutorial for making drop shadows, using the free Gimp graphics editor. On the Web: Go see how Scott Schiller achieved this same four-sides PNG effect. Browser Disclaimer

Full property table previous next contents properties index Appendix F. Full property table Note: Several sections of this specification have been updated by other specifications. Please, see "Cascading Style Sheets (CSS) — The Official Definition" in the latest CSS Snapshot for a list of specifications and the sections they replace. Server-Sent Events Abstract This specification defines an API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events. The API is designed such that it can be extended to work with other push notification schemes such as Push SMS. Status of This document This section describes the status of this document at the time of its publication. Other documents may supersede this document. If you wish to make comments regarding this document in a manner that is tracked by the W3C, please submit them via using our public bug database. You can also e-mail feedback to (subscribe, archives), or (subscribe, archives). Notifications of changes to this specification are sent along with notifications of changes to related specifications using the following mechanisms: E-mail notifications of changes Commit-Watchers mailing list (complete source diffs): Table of Contents WebIDL The

CSS display: inline-block: why it rocks, and why it sucks Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block. Problems with float The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt. Enter display: inline-block This is where the magic value inline-block for the display property comes into play. 01. 02. ul#display-inline-block-example, 03. ul#display-inline-block-example li { 04. /* Setting a common base */ 05. margin: 0; 06. padding: 0; 09. ul#display-inline-block-example li { 10. display: inline-block; 11. width: 100px; 12. min-height: 100px; 13. background: #ccc; 15. 17. 18. 19. 20. 21. 1.

CSS character escape sequences There are some other cases where you might want or need to escape a character in CSS. You could be writing a selector for a funky id, class, attribute or attribute value, for example; or maybe you want to insert some weird characters using the content property without changing your CSS file’s character encoding. Identifiers and strings in CSS The spec defines identifiers using a token diagram. The grammar for identifiers is used for various things throughout the specification, including element names, class names, and IDs in selectors. The spec definition for strings says that strings can either be written with double quotes or with single quotes. As you can see, character escapes are allowed in both identifiers and strings. How to escape any character in CSS Here’s a simple list of rules you should keep in mind when escaping a character in CSS. Leading digits If the first character of an identifier is numeric, you’ll need to escape it based on its Unicode code point. Whitespace characters