Check out a free preview of the full CSS In-Depth, v2 course:
The "CSS as the Solution" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

People often default to using JavaScript libraries instead of using CSS as solutions to UX features. Estelle gives some examples of starting with CSS as a base instead to address designer requests, including include providing input masking and creating a carousel with a few lines of CSS and a few lines of JavaScript, instead of a full-fledged framework.

Get Unlimited Access Now

Transcript from the "CSS as the Solution" Lesson

[00:00:02]
>> Estelle Weyl: And then there is sometimes where CSS you have a problem and CSS is actually a solution instead of using frameworks, so I came up with two things. I had a designer who really didn't want the placeholder to be gray and he wanted it to stay when the user was typing in code.

[00:00:22] So here if I type in the 5, the month, so May 44, right? You saw here that the Y was still there and the Y is pink but I could change it and make it green, right? Right now it's one pixel too high but I can fix that.

[00:00:45] So I had this requirement to figure out how to make it so the placeholder was a different color so that it was a mask, it was input masking so that when the user was entering data, they always saw it and I thought how can I do this. I can either use jquery with the input mask framework, which keeps it the same color, but at least makes input mask black, cuz it's actually the value, or I could come up with a solution.

[00:01:15] So my solution was to create a span that is behind the input. So making the input transparent, put a span behind it that says MM/YY. And when they fill in the first character, that first M goes transparent. When they fill in the second character, that second M, it's still there as the number 5 but it is transparent.

[00:01:42] And then when they enter 4 with Javascript, I add the slash. But with the CSS, I make the mask that they have already entered transparent. So what I did is I basically set input idea for the ZIP code if this one's for the ZIP code. I said id = zip, type = telephone so that I get the keypad, the number keypad.

[00:02:07] Name is ZIP code, class is mask, placeholder is xxxxx or 5 x's, pattern which is an HTML5 attribute. I said five digits exactly and entitled five digits it could. With a little bit of JavaScript, I progressively enhanced it. If they don't have JavaScript, it still works fine cuz the above is totally valid HTML and the browser will validate it.

[00:02:29] If they have JavaScript, it takes the masked. It puts a span in front of it with Aria head untrue, the idea is that mask and then if they had entered the number 123, the number 123 is inside the I. And then the numbers if they haven't done the mass that still there is not inside the eye and I made the eye transparent.

[00:02:58] So that whole span, which goes before in the code, before the markup, before that input, is just the actual final value that we're looking for, with the stuff that's in the I transparent. So, this took very little JavaScript, it took 125 lines of JavaScript to basically Not just create this but also to validate to ensure that there's firm validation.

[00:03:25] And the css is basically shell span color green, which you can change
>> Estelle Weyl: The I is transparent. And.
>> Estelle Weyl: It's kind of it.
>> Estelle Weyl: There's a GitHub Repo right here if you wanna take a look. There's a few more lines of CSS and for some reason I did not include it in this little thing.

[00:03:56] Let's click on the GitHub Repo, open in a new tab, and take a look.
>> Estelle Weyl: The CSS
>> Estelle Weyl: The input that's masked, the important part is that it's transparent, that's the only feature that is monospace and transparent. That's really the only thing that's different. The shell span I is transparent or has an opacity of zero or its visibility hidden.

[00:04:43] Anyone of these three will work and that's the feature. So I put it exactly in the same location, because the span is actually positioned absolutely with in that parent. So I put this behind the input. If I had it put in front of the input, because they wanted a background color on the input, which is doable, all I would have had to do is put pointer events none on the span.

[00:05:12] And the pointer events known is actually a feature. We're gonna talk about it in, like, two minutes. So another feature that I wanted to do was to create an accessible carousel without java script. There is three lines of java script in this carousel. Right here, you can barely see it, but the second.

[00:05:36] Circle was selected. I'm gonna click on the right arrow.
>> Estelle Weyl: I'm just clicking on the right arrow on my keyboard, the left arrow on my keyboard, the up arrow, [COUGH] and the down arrow. You see how that's perfectly functional? It's completely accessible because I'm using radio buttons. The only thing that JavaScript does is it changes the class on the parent to give it a class, to say which one's showing.

[00:06:08] And then I transition left and right, based on that click. So HTML for this is field set and then a legend. So to the screen, we're actually saying, select an address to edit and then I have a label for my address and then I have an input type radio that has see label for address1 and this is id address1 and it's checked.

[00:06:40] And then the next one gets checked and all that happens is the class. Up here of left0 goes from left0, left1, left2, left3, left4 or however many there are and that's it. All I'm doing is transitioning the left property.