Category Archive for: 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.


What You Need to Know About WCAG 2.1

Background on WCAG The Web Content Accessibility Guidelines (WCAG) 2.0 have been the international standard for accessibility since the European Union adopted them in 2016. WCAG 2.1 adds new requirements to each of the three compliance levels (A, AA, and AAA). Here at Viget, we aim to comply with WCAG Level A on all projects and we work with clients to determine which aspects of AA and AAA compliance are appropriate for their audiences. What’s New in Level A Label and name text should match on HTML elements (2.5.3). It’s important to note that this standard isn’t necessarily referring to the name attribute on input elements. For some elements, identifiable text could be a label, the text inside the element or the name attribute. Don’t rely on device motion or wild pointer gestures for functionality (2.5.4 & 2.5.1). This one may seem like a no-brainer, but as digital experiences continue…

Read More →

Switch font color for different backgrounds with CSS

Ever get one of those, “I can do that with CSS!” moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018. They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting the font color based on the selected background color of the container. If the background is dark, then it would be ideal to have a white text to keep it WCAG contrast compliant. But what happens if a light background color is selected instead? The text is both illegible and fails accessibility. They used an elegant approach and solved the issue using the “color” npm package, adding conditional borders and automatic…

Read More →

A CSS Approach to Trap Focus Inside of an Element

I recently read this article by Keith Grant which introduced the newly arrived <dialog>. Excited by this new UI element, I immediately sat down to experiment with it to see how it can be used effectively as a modal — the most common use of it. While experimenting, I discovered a neat CSS trick on how to trap focus within the <dialog> element, a common accessibility requirement for modals, and a notoriously difficult one. What is focus trapping? First, a quote from the W3C documentation regarding what should happen following a key press inside a dialog: Tab: Moves focus to the next tab-able element inside the dialog. If focus is on the last tab-able element inside the dialog, moves focus to the first tab-able element inside the dialog. Shift + Tab Moves focus to the previous tab-able element inside the dialog. If focus is on the first tab-able element inside the dialog,…

Read More →

CSS Grid Layout Module Level 2

The second iteration of CSS Grid is already in the works and the public editor’s draft was released last week! While it is by no means the final W3C recommendation, this draft is the start of discussions around big concepts many of us have been wanting to see since the first level was released, including subgrids: In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align. The currently defined characters of subgrid items are particularly interesting because they illustrate the differences between a subgrid and its parent…

Read More →

Counting With CSS Counters and CSS Grid

You’ve heard of CSS Grid, I’m sure of that. It would be hard to miss it considering that the whole front-end developer universe has been raving about it for the past year. Whether you’re new to Grid or have already spent some time with it, we should start this post with a short definition directly from the words of W3C: Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions. In my own words, CSS Grid is a mesh of invisible horizontal and vertical lines. We arrange elements in the spaces between those lines to create a desired layout. An easier, stable, and standardized way to structure contents in a web…

Read More →

HTML 5.2 is Done, HTML 5.3 is Coming

The W3C has completed its second round of HTML5 recommendations for implementation. The entire announcement is worth a read because there are interesting tidbits that provide more context and personnel changes within W3C, but the highlights of this recommendation are nicely summed up: Many of the features added integrate other work done in W3C. The Payment Request API promises to make commerce on the Web far easier, reducing the risks of making a mistake or being caught by an unscrupulous operator. New security features such as Content Security Policy protect users more effectively, while new work incorporated from ARIA helps developers offer people with disabilities a good user experience of their applications. There are also semantic changes to HTMl elements that are worth noting: Clarifications and bug fixes bring the HTML Recommendation closer to what has been deployed recently. The definition for the main element has been updated to support…

Read More →

The latest ways to deal with the cascade, inheritance and specificity

The cascade is such an intrinsic part of CSS that they put it right there in the name. If you’ve ever needed to use !important to affect specificity in the cascade, you’ll know that it can be a tricky thing to deal with. In the early days of CSS, it was common to see highly specific selectors like this: #sidebar ul li {} We’re all much better at managing specificity nowadays. It’s a widely accepted best practice to keep specificity low and flat—to shun ID selectors, to make liberal use of classes, and to avoid unnecessary nesting. But there are still plenty of situations where a more specific selector will be useful. With the introduction of a newly proposed pseudo-class, more support of the shadow DOM, and the use of the all property, we will soon be able to handle inheritance and specificity in new and exciting ways. The :is…

Read More →

Further working mode changes at WHATWG

The Web Hypertext Application Technology Working Group (WHATWG) announced that it has adopted a formal governance structure: The WHATWG has operated successfully since 2004 with no formal governance structure, guided by a strong culture of pragmatism and collaboration. Although this has worked well for driving the web forward, we realized that we could get broader participation by being clear about what rights and responsibilities members of the community have. Concretely, this involves creating an IPR Policy and governance structure. WHATWG was founded by folks at Apple, Mozilla and Opera. The new structure will be comprised of individuals from Apple, Google, Microsoft and Mozilla. The Big Four, you might say. I find this interesting because we often think of the Web as a wild west where standards are always evolving and adopted at a different pace. This change largely keeps public contributions to the Living Standards in tact, but establishes a…

Read More →

New in Chrome 63

Yeah, we see browser updates all the time these days and you may have already caught this one. Aside from slick new JavaScript features, there is one new CSS update in Chrome 63 that is easy to overlook but worth calling out: Chrome 63 now supports the CSS overscroll-behavior property, making it easy to override the browser’s default overflow scroll behavior. The property is interesting because it natively supports the pull to refresh UI that we often see in native and web apps, defines scrolling regions that are handy for popovers and slide-out menus, and provides a method to control the rubber-banding effect on some touch devices so that a page does a hard stop at the top and bottom of the viewport. For now, overscroll-behavior is not a W3C standard (here’s the WICG proposed draft). It’s currently only supported by Chrome (63, of course) which also means it’s in…

Read More →

Editing the W3C HTML5 spec

Bruce Lawson has been tapped to co-edit the W3C HTML5 spec and, in his announcement post, clarified the difference between that and the WHATWG spec: The WHATWG spec is a future-facing document; lots of ideas are incubated there. The W3C spec is a snapshot of what works interoperably – authors who don’t care much about what may or may not be round the corner, but who need solid advice on what works now may find this spec easier to use. I was honestly unfamiliar with the WHATWG spec and now I find it super interesting to know there are two working groups pushing HTML forward in distinct but (somewhat) cooperative ways. Kudos to you, Bruce! And, yes, Vive open standards! Direct Link to Article — Permalink Editing the W3C HTML5 spec is a post from CSS-Tricks Source: CssTricks

5 things CSS developers wish they knew before they started

You can learn anything, but you can’t learn everything 🙃 So accept that, and focus on what matters to you — Una Kravets 👩🏻‍💻 (@Una) September 1, 2017 Una Kravets is absolutely right. In modern CSS development, there are so many things to learn. For someone starting out today, it’s hard to know where to start. Here is a list of things I wish I had known if I were to start all over again. 1. Don’t underestimate CSS It looks easy. After all, it’s just a set of rules that selects an element and modifies it based on a set of properties and values. CSS is that, but also so much more! A successful CSS project requires the most impeccable architecture. Poorly written CSS is brittle and quickly becomes difficult to maintain. It’s critical you learn how to organize your code in order to create maintainable structures with a…

Read More →

Best Way to Programmatically Zoom a Web Application

Website accessibility has always been important, but nowadays, when we have clear standards and regulations from governments in most countries, it’s become even more crucial to support those standards and make our projects as accessible as they can be. The W3C recommendation provides 3 level of conformance: A, AA and AAA. To be at the AA level, among other requirements, we have to provide a way to increase the site’s font size: 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) Let’s look at solutions for this and try to find the best one we can. Incomplete Solution :  CSS zoom The first word which comes up when we talk about size changing is zoom. CSS has a zoom property and it does exactly what we want — increases size. Let’s take a…

Read More →

The Best Way to Implement a “Wrapper” in CSS

Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page. I’ve always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I’m not the only one wondering! I’ll sum up my latest thoughts in this article. Before we dive into it, let’s first examine the difference between the “wrapper” and the “container”. “Wrapper” vs “Container” I believe there is a difference between wrapper and container elements. In programming languages, the word container is generally used for structures that can contain more than one element. A wrapper, on the other hand, is something that wraps around a single object…

Read More →

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 →

Back to Top