Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.” Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. I’ve created a font-stack for each typeface while considering the font share table statistics.
W3Fools – A W3Schools Intervention Increasing the Clickable Area of Inline Links Demo It has been best practice for some time now to ensure that navigation links have appropriate padding. This makes clicking these links much easier, especially if you are on a mobile device. Here is an article, written four years ago, discussing this very idea. Why aren’t we taking this one step further? Links don’t only exist in menus, and inline links can be tricky to click accurately. Now keep in mind that this is only a thought. The trick is to be subtle with this technique; increase the click area enough that users don’t have to be 100% accurate, but don’t increase it too much so that the behavior becomes unexpected. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this technique? Tweet this
Firefox's birthday present to us: Teaching tech titans about DIY upstarts High performance access to file storage Open ... and Shut It's hard to believe it now, but not too long ago the web was dangerously close to being owned by one vendor: Microsoft. As mainstream users came to equate Internet Explorer's logo with the Web, Microsoft worked to lock in its advantage with increasingly proprietary technology like ActiveX. It surely would have done so, too, but for the seemingly futile Mozilla browser, née Firefox. Precisely because it is about more than technology. Yes, that Firefox, the one that for years gobbled away at IE's 95 per cent market share, only to be largely supplanted in the hearts and minds of the geek elite by Google Chrome (though not in actual market share). Given technology's focus on the latest and greatest, it's easy to forget that much of this "latest and greatest" wouldn't even be possible without the work Mozilla did for years with Firefox. Quixotic as it may sound, the purpose of Firefox was always to spread Web freedom. As Lilly notes:
LESS « The Dynamic Stylesheet language The ABCs of Web Development Web development can often be an utterly perplexing affair. Today, aimed at beginners, I'd like to introduce you to twenty six concepts or technologies, each mapping to a letter of the alphabet. Sounds wonky? It probably is! Let's get started after the jump. Republished Tutorial Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. AJAX stands for Asynchronous JavaScript And XML and is the main driving force behind all these super smooth web applications you've been using over the past few years. AJAX, as a technology, has been pretty much all pervasive. At the center of everything is the XMLHttpRequest which allows calls to be sent and received, after a page has been fully rendered without touching the rest of the page. Related reading B -- Browser A browser is the understated structure on which you frame your magnificent masterpieces, be it websites or applications. CSS is one prong of the front end development trident. E -- Events
CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. This principle is based on the fact that page refreshes are disruptive to the user’s mental flow, causing what is known as “change blindness”, and that we need to be able to avoid breaking the visual flow of the user wherever and whenever we can. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. Technique #1: Absolutely positioned element
5 Reasons Why Responsive Design Is Not Worth It After the huge debate this original post created, we decided to refine and build upon the original article, bearing in mind the thoughts of some very insightful feedback left by some commenters. You can find the new article here. “We’re just now starting to think about mobile first and desktop second for a lot of our products.” ~ Kate Aronowitz, Design Director, Facebook “[The shift to mobile design] is even bigger than the PC revolution.” ~ Kevin Lynch, CTO, Adobe In 2014, more people will be using mobile devices to access the internet than desktop PCs. Responsive design is seemingly universally accepted as the way forward, but I am far from convinced. What is Responsive Design? Wikipedia describes responsive design as follows: Responsive Web Design essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries…with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. A Caveat Desktop Display 1.
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck The innovations of Internet Explorer Long before Internet Explorer became the browser everyone loves to hate, it was the driving force of innovation on the Internet. Sometimes it’s hard to remember all of the good that Internet Explorer did before Internet Explorer 6 became the scourge of web developers everywhere. Believe it or not, Internet Explorer 4-6 is heavily responsible for web development as we know it today. If Internet Explorer is a browser that everyone loves to hate, the Document Object Model (DOM) is the API that everyone loves to hate. In many regards, document.all was the very first version of document.getElementById(). Internet Explorer 4 was also the first browser to introduce the ability to get a list of elements by tag name via document.all.tags(). Internet Explorer 4 also introduced us to perhaps the most popular proprietary DOM extension of all time: innerHTML. Along the same lines, Internet Explorer 4 introduced insertAdjacentHTML(), yet another way of inserting HTML text into a document. Events
Pure CSS GUI icons (experimental) An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraint Several months ago I was experimenting with the creation of common GUI icons with CSS. Pseudo-elements provide many possibilities to developers interested in writing semantic HTML. Example code The technique behind this experiment is an expansion of the basic shape-creation that was used to make Pure CSS speech bubbles. The HTML is a basic unordered list of links. <ul><li class="power"><a href="#non">Power</a></li><li class="play"><a href="#non">Play</a></li><li class="stop"><a href="#non">Stop</a></li><li class="pause"><a href="#non">Pause</a></li></ul> Each icon uses its own set of styles.
Multiple Backgrounds and Borders with CSS 2.1 Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required. Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. How does it work? Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning. The pseudo-elements contain no true content and are absolutely positioned. What effects can be achieved? Most structural elements will contain child elements. Example code: multiple background images Each pseudo-element then has a repeated background-image set.
Coding Kung-fu: 35 Graphics Built Purely With CSS3 Look at the graphics below, awesome Photoshop works right? Nah, they’re created by CSS3. Yes, they’re completely “drawn” by CSS3! When we have seen enough CSS3 animations we thought those are all CSS3 can do as a potential Flash killer, but we’re wrong. Developers perhaps don’t satisfy with the fun of animation, so again, they push the boundaries of CSS3 to challenge the graphic editor’s realm. With this post comes 35 carefully crafted CSS3 graphics which even include something you wouldn’t relate with CSS3 like Apple iPhone, cartoon character Doraemon, and more surprises! You are strongly recommended to view these demos using the latest version of Safari or Developer version of Google Chrome. RSS Feed Icon RSS Feed Icon built with CSS3, exclusively from Hongkiat! Apple iMac Yeah my eyes also can’t believe that, but it’s iMac “assembled” purely with CSS3. Apple Keyboard It’s Apple Keyboard built with CSS3! Apple iPhone Oh, one more thing: iPhoneCSS3. Cherry Blossom Coffee Cup A tiring day? More
Quick Tip: The Multi-Column CSS3 Module For over six years, CSS3 columns have been available to us; yet, strangely, they're rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that - again - no support in Internet Explorer. But that's okay! The world will not end if IE users see one longer paragraph. I'll show you how to use this helpful module in today's video quick tip. column-count: The desired number of columns for the element. Please note that we must prefix each property with the -webkit or -moz, accordingly; so: -webkit-column-count. Do you use CSS columns in your projects?