The slide class is where we apply the animation. It’s important to note that this container has to be exactly as wide as our slide content, or else the slides won’t transition properly. The container inside of this, which holds our slide content, has a much larger width, so that the images and text content can be placed next to each other without wrapping to a new line. The outermost container of the demo has a fixed width, and its overflow property is set to “hidden”. To highlight that, we have a div with a class of text-container that is used to hold our non-image content. This slideshow also works with content other than images. Inside is a slideshow container where the images are placed. We start with an outer container using a section element with a class of slideshow. If you need a simple static site with an image slider, a CSS only approach is a great way to keep your website fast an light. If you enjoyed this demo, be sure to leave a comment, and more importantly, file a bug with Safari! Overall, the :focus pseudo-class can be a great way to add functionality to HTML and CSS, without having to invoke the use of JavaScript. I haven’t found a way around this issue, but as long as the WebKit bug is addressed, this technique should work just fine when the user clicks on the tabs. In the following demo the :focus pseudo-class doesn’t work in any of the versions of Safari that I’ve tested, which I suspect is due to a WebKit bug. Chrome, Firefox, and Opera also work as expected, but the demo does not work in Safari unless the tab key is being used to apply focus. I’ve tested this in IE8, and everything works as expected, except for the autofocus attribute, being that it’s an HTML5 feature. The autofocus attribute does allow one of the tabs to be visible on initial page load, but as soon as the user interacts with the page, the focus will be lost. This means that the user will always have to click on a tab to see content. Caveats for the Tabs Widgetīecause this widget depends on the :focus psuedo-class, the tabbed content will be visible only when the tabs have a focused state. I’ve also added focus styles to the tab’s container div, which means that the tab will keep its focused state until the user clicks outside the entire widget. We apply the :focuspsuedo-class to the button and use the adjacent sibling selector to show the related paragraph element when the button is focused. Each tab is wrapped in a div, and each div is given a tabindex value, which allows the to be focusable.Īs for the CSS, each button is set to display: inline-block, allowing for the tabs to appear side by side. The first button element has the autofocus attribute, so that the first tab will be visible on the initial page load. Each paragraph element is hidden, then set to position: absolute so that the content will display in the same area for each tab. In the HTML, each tab is a button with the content for each tab inside of a paragraph element. See the Pen Pure CSS Tabs Widget by SitePoint ( on CodePen. Each of these values determines what order an element should be focused on. It can take several values, including a negative value, zero, or a positive value. HTML’s tabindex attribute indicates if an element can receive focus. Additionally, you can apply a :focus state to any HTML element as long as you give it a tabindex attribute. It is supported in every browser including IE8+. The :focus pseudo-class is used to target an element that has received focus by the user (either by using the keyboard or the mouse). So instead of another checkbox tutorial, I’d like to show how you can create an accessible tabs widget using the :focus pseudo-class in CSS. We’ve all seen how the checkbox hack can be used for interactivity without JavaScript, but unfortunately, this comes at a cost to accessibility.
0 Comments
Leave a Reply. |