PrefixFree: Break Free From CSS Prefix Hell Advertisement This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known for her experiments with CSS and JavaScript and in this post she presents her recent tool, prefixfree, which will hopefully help you break free from the CSS prefix hell. So What’s the Problem With Prefixes? I’m sure we all agree that CSS3 is pretty cool and that it enables us to do things that were previously impossible. I’m not saying that prefixes are bad. A Solution: prefixfree The code I write in my live demo slides and presentations doesn’t have any prefixes, even for things like @keyframes or the transition property, which aren’t yet supported anywhere prefix-less. The script essentially does everything in JavaScript’s power to allow you to completely forget about vendor prefixes. So, what does the rule above become with prefixfree? Download the Script on GitHub!
Beginners guide to Sitecore All articles Beginners guide to Sitecore If you are new to Sitecore and need a beginners guide, you have come to the right place. Learn Sitecore holds several articles when you need to get started with Sitecore: The following tutorial is a great beginners guide to Sitecore: If you need information about how to sort items in Sitecore take a look here Tutorial: How to manage sorting in Sitecore If you need a beginners guide to implement a XAML application in Sitecore, check out this article: Tutorial: How to build your first XAML application If you need a beginners guide to implement a multisite solution in Sitecore, check out this article: Tutorial: Building multisite solutions in Sitecore If you need to get started with Sitecore OMS, check out the following articles: If you are getting started with Sitecore and want to know more about Sitecore Caching, check out the following article: Tutorial: Understand Sitecore Caching If you need to implement a Lucene search, check out the following guide:
All About Floats What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called "text wrap". In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float The Great Collapse Video
Getting Started - Google Web Fonts This guide explains how to use the Google Fonts API to add fonts to your web pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. A quick example Here's an example. Copy and paste the following HTML into a file: Then open the file in a modern web browser. Making the Web Beautiful! That sentence is ordinary text, so you can change how it looks by using CSS. You should now see a drop shadow under the text: And that's only the beginning of what you can do with the Fonts API and CSS. Overview You can start using the Google Fonts API in just two steps: Add a stylesheet link to request the desired web font(s): Style an element with the requested web font, either in a stylesheet: or with an inline style on the element itself: For a list of fonts you can use, see Google Fonts. Specifying font families and styles in a stylesheet URL For example, to request the Inconsolata font: For example:
E4X Quick Start Guide Table of Contents First came Javascript, introduced by Netscape and having no real non-marketing relation to the Java programming language. Then came JScript, Microsoft's Javascript implementation. Then came ECMAscript, the standardized version of the language which unified the flavors (at least the basics) and provided consistent behavior and licensing terms to implementations. Soon there were lots of ECMAscript implementations, in browsers from Firefox and Internet Explorer and Opera and Safari, through to Adobe's Flash. But ECMAScript, which I'll still informally call Javascript for the remainder of this article, doesn't play terribly well with the primary markup languages of the web -- XML and HTML. Enter E4X, officially "ECMAscript for XML", a standard extension to Javascript that makes XML (and therefore XHTML) a first-class datatype within the language. Literal XML E4X introduces a new type, "XML", which holds an XML element. Trick: Know your context. c.phone. Constructing XML c.
There’s more to the CSS rem unit than font sizing The following is a guest post by Roman Rudenko, a mad scientist at Mobify where he’s tasked with understanding why browsers misbehave and with cajoling them into playing nice. When he’s not coding, Roman is learning to ride a motorbike without crashing into too many solid objects. Many web designers and developers are familiar with the CSS rem length unit. But, you may not know that it has a couple of handy alternate uses. In this post, I’ll describe how to use the CSS rem unit to scale specific page elements while leaving others unaffected. I’ll also discuss how to use it as a replacement for the under-supported vw (viewporth width) unit. For readers unfamiliar with the rem unit (standing for "root em"), it provides a way to specify lengths as fractions of the root element’s font size. First, let’s look at how rem works and how it differs from the em unit. Rem can be used for its typical font sizing duty. Scaling document elements Replacement for vw Share On
Developing Responsive Designs With Opera Mobile Emulator Advertisement This is our seventh article in a series that introduces useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts. The fourth shared a free plugin called GuideGuide with us, and later we’ve announced Erskine’s responsive grid generator Gridpak and Remy Sharp’s debugging tool JS Bin. Back in 2009, when coding version 10 of Opera Mobile, my Opera colleagues decided to tune the Opera Mobile build machine so that it would churn out builds not only for common mobile platforms, but for Windows and Linux as well. So, we decided to iron out the wrinkly bits, added a Mac build channel, and turned it into a publicly available developer tool, called Opera Mobile Emulator. Basic Usage When launching the emulator, you are greeted with a profile selector.
Web Standards Curriculum - Dev.Opera Formalize CSS - Teach your forms some manners!