Posts Tagged:W3C

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Some Extremely Handy `:nth-child` Recipes as Sass Mixins

There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can use to add some number-based logic to your CSS! Using :nth-child and :nth-last-child, you can get some surprisingly complex information without ever leaving your stylesheet. This post will assume that you have a basic understanding of how the :nth-child pseudo-selector works. If you need a quick refresher, Chris has a great post covering that topic. Writing Complex :nth-child() Selectors You may be aware that along with :nth-child there is the related :nth-last-child. It works exactly the same as :nth-child except that it starts from the end of the parent. For example, you can select the first three children of a parent by using the selector :nth-child(-n + 3). You can use :nth-last-child(-n + 3) to select…

Read More →

Tracing the History of CSS Fonts

Chen Hui Jing has written an excellent post on the history of CSS fonts and the way that the W3C writes the specification and strange CSS properties like font-effect, font-emphasize and font-presentation. As part of my perpetual obsession with typography, as well as CSS, I’ve been looking into how we got to having more web fonts than we can shake a stick at. What I love about how the W3C does things is that there are always links to previous versions of the specification, all the way back to the first drafts. Although those are missing the full picture of the various discussions and meetings among all the individuals involved in crafting and implementing the specifications, it does offer some clues to how things got to where they are. Tracing the History of CSS Fonts is a post from CSS-Tricks Source: CssTricks

Tracing the History of CSS Fonts

Chen Hui Jing has written an excellent post on the history of CSS fonts and the way that the W3C writes the specification and strange CSS properties like font-effect, font-emphasize and font-presentation. As part of my perpetual obsession with typography, as well as CSS, I’ve been looking into how we got to having more web fonts than we can shake a stick at. What I love about how the W3C does things is that there are always links to previous versions of the specification, all the way back to the first drafts. Although those are missing the full picture of the various discussions and meetings among all the individuals involved in crafting and implementing the specifications, it does offer some clues to how things got to where they are. Direct Link to Article — Permalink Tracing the History of CSS Fonts is a post from CSS-Tricks Source: CssTricks

Ordered Lists with Unicode Symbols

Ordered lists are among the oldest and most semantically rich elements in HTML. Anytime you need to communicate sequence or ranking, the <ol> tag is there to help. The default appearance of the <ol> tag presents numbers next to each item in the list. You can use the list-style-type property in CSS to change the default to use Roman numerals or the letters of the alphabet. If you are feeling exotic, you can even use numbering from other cultures like Hebrew or Greek. The full list of available values is well-documented and easy to use. Recently, I saw an opportunity to use dice in place of numbers for several ordered lists explaining the features of an HTML5 game I created called Triple Score Bopzee. To accomplish my goal, I first experimented with a now-familiar technique for using a small image file as the background for the li::before selector in a…

Read More →

Smooth Scrolling and Accessibility

Smooth scrolling (the animated change of position within the viewport from the originating link to the destination anchor) can be a nice interaction detail added to a site, giving a polished feel to the experience. If you don’t believe me, look at how many people have responded to the Smooth Scrolling snippet here on CSS-Tricks. Smooth scrolling vs abrupt jumps Regardless of how you implement the feature, there are a few accessibility issues that should be addressed: focus management and animation. Focus Management It is important to ensure that all content can be accessed with the keyboard alone because some users 100% rely on the keyboard for navigation. So, when a keyboard user navigates through the content and hits a link that uses smooth scrolling, they should be able to use it to navigate to the target anchor element. In other words, when you follow a link, the keyboard focus…

Read More →

Getting Started with CSS Grid

This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That’s right: we can now go and play with Grid in two of the most popular browsers right away. But why is CSS Grid a big deal and why should we care? Well, CSS Grid is the first real layout system for the web. It’s designed for organizing content both into columns and rows and it finally gives developers almost God-like control of the screens before us. That means that we can finally ditch decades of hacks and workarounds for setting elements on a web page – ultimately it means that complex layouts and beautifully typeset pages are now not only possible but easy and maintainable. With CSS Grid, the web is about to become a much more beautiful place than what we’re accustomed to. OK,…

Read More →

Annotation is Now a Web Standard

This sure is exciting news: the various groups that make up the W3C have agreed upon a set of rules by which we’ll be able to annotate, highlight and make comments to a webpage without the need of a third party script or framework. Dan Whaley describes why this could be a big deal: The W3C standards are a key milestone towards a future in which all pages could support rich layers of conversation without requiring any action by their publishers—because that capability can be built into the browser itself and be available as a native feature, just like like web search. The shared vision is that conversations will be able happen anywhere on the Web, or even on documents in native apps, and inline instead of below-the fold, in a federated, standards-based way. Direct Link to Article — Permalink Annotation is Now a Web Standard is a post from…

Read More →

Is Your Healthcare Site Accessible? (VIDEO)

  REMODELING FOR ACCESSIBILITY In my previous post about accessibility and hospitals, I explained why it’s so important that both the digital space and the literal space be accessible and free of barriers.  I emphasized  the physical structure of the hospital and “building it right” from the start. The reality is many of us don’t have a chance to “start fresh.” Rather, we “remodel” to make a space or design aesthetic work for us. Using an analogy from the literal space, let’s say a hospital was built in the 1970s. Retro orange fabric in a waiting room may be swapped out today on the couches for a more crisp and modern fabric. That slight design change gives that room  a whole facelift.  Or from a comfort perspective, getting rid of metal chairs for more ergonomic, cushioned chairs can impact the overall patient experience.  On structural remodels, a new “wing” may…

Read More →

20 Years of CSS

Bert Bos, noting today as quite a notable day: On December 17, 1996, W3C published the first standard for CSS. Very interesting to see what historic points made the cut for the timeline. The Zen Garden, acid tests, preprocessors… good times! Direct Link to Article — Permalink 20 Years of CSS is a post from CSS-Tricks Source: CssTricks

Prerender on hover?

InstantClick is a pretty popular JavaScript library (4,344 stars, as I type). This is the gist: Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when you click. You hover a link, it Ajaxs for that page and prerenders it. On click, it replaces the <body> and <title> and changes the URL. I just heard about it. Seems pretty smart. Progressive enhancement. Increased perceived performance. I can imagine one objection being bandwidth concerns. Downloading every page I hover over seems a bit bandwidth greedy. It got me thinking though… isn’t there a newfangled prerendering thing? There is: <link rel=”prerender” href=”(url)”> It’s not that newfangled, actually. Steve Souders wrote about it in 2013: This is like opening…

Read More →

The SVG 2 Conundrum

The SVG we know and love today is “SVG 1.1 2nd edition”. SVG 2 is in Editor’s Draft status at the W3C, and it’s at serious risk of never getting past that, as it’s charter may not be renewed before it reaches recommendation status. Tavmjong Bah on part of the reason: While shocking and unexpected, it didn’t come out of left field. The active participation in the working group has dropped to just a handful of people, none representing any of the browser vendors. In fact, the last two “face-to-face” meetings had attendance of just three regular participants, one from Canon (which is dropping membership in the W3C as the end of the year) and two invited experts who are working for free. Like Tavmjong, I also spoke with Doug Schepers recently about SVG 2. He ran through most of the major new features for me. This is a good…

Read More →

What is the difference between CSS variables and preprocessor variables?

Variables are one of the major reasons CSS preprocessors exist at all. The ability to set a variable for something like a color, use that variable throughout the CSS you write, and know that it will be consistent, DRY, and easy to change is useful. You can use native CSS variables (“CSS Custom Properties”) for the same reasons. But there are also some important differences that should be made clear. A simple example of preprocessor variable usage is like this: $brandColor: #F06D06; .main-header { color: $brandColor; } .main-footer { background-color: $brandColor; } That was the SCSS variant of Sass, but all CSS preprocessors offer the concept of variables: Stylus, Less, PostCSS, etc. The above code would do nothing in a browser. The browser wouldn’t understand the declarations and toss them out. Preprocessors need to compile into CSS to be used. This code would compile to: .main-header { color: #F06D06; }…

Read More →

An in-depth guide to CSS3 Media Queries

Inspired Magazine Inspired Magazine – creativity & inspiration dailyMedia queries are one of the best things ever to happen in Web development, but even though they’re now being widely used (largely due to their implementation in templates and frameworks), they’re still not very well understood by the majority of developers.  The power and features available to developers to create better websites is definitely being under-utilized.  So with that in mind, we have put together this guide to media queries.  If you haven’t given much attention to media queries before, this is your opportunity to gain more insight into everything you can do with them.Media queries are at the heart of responsive design and adaptive designResponsive design is a really big thing these days.  Adaptive design is actually better, but because it’s more work, not many people prefer to do it.  Both of these design methods rely on media queries to…

Read More →

Testing Your Website for Mobile Devices

These days, you can do virtually anything on your mobile device. If you’ve ever been standing in a crowd of people, heard one of the generic iPhone ringers go off and watched about 14 different people pull out their cell phone, then you know what I’m talking about. Nielsen estimates that there are over 160 million smartphone users in the US. 160+.million.people. All surfing the web, and all probably playing Angry Birds. And that number is only going to get bigger.

Back to Top