Podcast Episode

371 – Test Your CSS Code and Browser Support


Is there a plugin for that?

With more than 50,000 plugins in the WordPress repository, it’s hard to find the perfect one. Each week, I will highlight an interesting plugin form the repository.

For more great plugins, download my 50 Most Useful Plugins eBook.

File Manager Advanced is a cPanel interface for WordPress where you can edit, delete, download, zip, and copy without the need of cPanel or FTP.

Test Your CSS Code and Browser Support

When writing code one of the hardest part is keeping up with the changing technologies. There are constantly new standards and CSS compatibility problems with all browsers, users, sizes, etc.

As designers or programers we usually have the most recent browser updates installed and use the most common browsers. However we can’t expect everyone who views a website to be using the exact same version of Chrome as we are.

Here are six tool to check and make sure your code is ready for any device that’s out there.

Reset CSS
One of the most annoying problems is, when creating a nice first draft, you show it to a client and for him elements suddenly look different. This is because browsers render CSS differently. So we need to always reset the browser CSS. For that, I like to code from Meyerweb

Check Browser Support
Just as client CSS can influence the output of the (newly) designed website, browser support of different CSS rules can vary as well. A great site I love is caniuse.com. You just type the element you want to use in the filter and it will show you browsers and versions which are supported and which aren’t.

Global vs. Unprefixed Support
As browsers then also have their own implementation of many newer CSS rules and checking for necessary vendor prefixes is necessary. Save time and don’t worry about writing all the prefixes with Pleeease. You can insert your css and it will create the prefixed version for you.

Another thing to discuss is polyfills. They make it possible to check if a browsers supports a certain feature and if not offer a way to use something else instead. If you don’t want to write all of that yourself, you can use Modernizr to do the heavy lifting for you.

Write better CSS
Another tool that doesn’t address browser support but your code itself, is csslint.net. It’s meant to hurt your feelings and will make you write better CSS code.

Double check your work
By using Browser Stack you can run your website thru dozens of different simulators to show off what the site looks like on different operating systems or devices

Thank You!

Thank you to those who use my affiliate links. As you know I make a small commission when someone uses my link and I want to say thank you to the following people. For all my recommended resources, go to my Resources Page

Full Transcript

Business Transcription is provided by GMR Transcription.

On today's episode, we are going to continue the discussion on things we may not test when launching a website. And today we'll talk about testing your code in browser support right here on Your Website Engineer podcast episode number 371.

Hello, everybody. Welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. And today, we are going to continue the discussion about what we should be testing, and making sure that it looks good, and works well on our websites before launching them, or even if we make some edits or whatnot. So let's go ahead and we'll dive in with some announcements. The first thing is the WordPress user survey data from 2015, 2016, and 2017 is now available online. This used to be data that was collected, and then always recapped, or rehashed at the WordCamp US or WordCamp San Francisco. All this data was just added altogether, and formulated, and then Matt talked about in the State of the Word. And there wasn't any of this in the State of the Word. And the State of the Word address was already an hour and a half and like. So we just didn't have time to talk about all this stuff.

But basically, if you want to learn more about just seeing answers from other WordPress professionals, or WordPress users, or all the respondents’ data, you can go and find this link over at WordPress.org/news, and look for an article that was published in 2017 in December. And you can find all this information and basically, it goes through and gives a big percentage of people. And it looks like there were a few thousand people that responded. It was 16,000 people responded this year; 15,000 last year. And then there was a there was a calculation error and it says 45,000 people did in it 2015. But those numbering schemes aren't quite right. So about 16,000 people answered the survey, and went through, and just share about how they use WordPress, how they make money with WordPress, how many websites they've built, how many websites their company manages, and all that good stuff.

So if you're interested in seeing any of those results, and see how you stack up into the averages, and how much you use WordPress, and all that good jazz, I recommend checking out the information there, and just browsing through it. There's a lot of numbers, and you can definitely take some time if your numbers junkie, and want to read about that. Another thing we should review this week is a course over at Gutenberg.courses. Believe it or not, that is a website but this is by educator Zach Gordon. He is the one that created a course a few years ago about JavaScript and then continues to teach JavaScript at different WordCamps and whatnot.

And he's created this course that is allowing you to master the future of WordPress and develop with the new JavaScript driven Gutenberg editor. It gives you all kinds of information about how Gutenberg core works under the hood, important JavaScript libraries that ship with Gutenberg, the modern JavaScript approach of using ES 6, JSX, React, Webpack, and more; just options for [inaudible] [00:02:43] developers to extend and customize Gutenberg. There are more than 30 videos. It's three hours' worth of content and 12 example blocks. It is on sale right now for $49.00 BoldGrid is being a sponsor and they're knocking $30.00 off the price of a normal $79.00. So if you are interested in about how Gutenberg's gonna work, then I definitely recommend this course for somebody that is running a theme shop because there's so many cool things that you could implement within a theme that's coming with Gutenberg and you can learn all of that in this course.

And I believe that $49.00 price tag is well worth the investment and you're gonna learn a lot in it. I would go ahead and purchase it but I just don't have time to finish some of the other courses that I'm working through. So I'll go ahead and learn that after it comes out. So that's what I want to share with you. And then one other piece of news came from Manage WP. This was an article that I found a while ago and it was talking about a way to manage WordPress websites. They've relaunched, and fixed, and made some changes with the way that Manage WP works. It is free now unlimited websites forever.

So you can sign up for as many free sites as you want to manage within Manage WP. And what it does is if you can manage updates for plugins, and themes, and core, you can have a monthly cloud backup, you've got one click login, you've got security check, performance check, manage comments, analytics, code snippets, maintenance mode, client report, and vulnerability updates. You can get all of that free unlimited for unlimited amounts of sites. Then they have per website upgrades, so if you wanted to add a backup, the automatically backup, through Manage WP, it's just $2 per month per website. So you can do that, you can have a white label managing software that $1 per month, you can do SEO rankings, uptime monitory; a bunch of these things are just $1 per month per website. You can buy them in bundles as well but this is just something that I wanted to point out is happening in the WordPress space.

You can do a lot of this with Jetpack and the Calypso interface with Wordpress.com but I just wanted to point this out. And it's over at ManageWP.com. You can see all the pricing options that are at ManageWP.com/pricing. Alright, so let's go ahead and take a look at the plugins. There's so many plugins and I wish I could do a dozen plugins a week because there's just so many cool new ones that are out there that I've never seen; never tried. And this is another one that falls in that category and this one's called File Manager Advanced. What this is is it is a cPanel for file management within WordPress. You can edit, delete, upload, download, zip, copy; you can do all kinds of operations to files within WordPress without the need of cPanel or FTP.

I'm definitely gonna check this one out as sometimes we need to help users at WooCommerce support and we say, "Oh, you need to add this line in the wp-config file to enable debugging and then we can see what's going on." Well, with this, we should be able to go in, and edit, and add that line of code ourselves. And then we can start seeing the error logs because we can view the files that are on the server right in the WordPress dashboard. So this can be very, very helpful in that manner and it's just an alternative to FTP. There's no technical information that you need to know. This allows you to install and get it all working. It's got keyboard shortcuts. You can do all kinds of things. So there's no need to -- It seems like it's a file editor. It's what's built into the cPanel within your WordPress site but it takes a lot less effort to get there.

Depending on what type of website that you're being hosted on or what type of hosting company that you're using, it could be very tedious to find that login information, and then navigate, and find where the file manager is. And the file manager is usually on the clunky side on cPanel and just a lot of steps to try to get somebody to disable the plugins folder by renaming it so you can log into your site. Whatever you may be looking for you, can probably do this with the File Manager Advanced. You can search for that in the WordPress repository. Or as always, you can find the link in the show notes for episode number 371. Alright, today, I wanna talk a little bit about how we can test our CSS code, and browser support, and stuff that we may not think about.

This is 2017. In theory, all browsers should work the same way; all mobile devices should work the same way but that's not quite the case. The reason that it has to be tested on or the themes that we purchase, say, that are tested with, "IE this, and Firefox this, and Chrome this, and Safari this." They're saying that because most of the time, it's all CSS conflicts. I didn't really think about this too much until I was sitting down and writing this episode or putting notes together for this episode. But in theory, HTML is HTML, and it's gonna display the same way on every type of browser. It's always the CSS that's causing some issues with the visuals of why your website looks a little wonky on one browser or one platform versus another. So that's why I wanted to go ahead, and dive in, and just talk about this. There's constantly new standards.

I was listening to a podcast the other day; it was Syntax.FM and it's one of those podcasts that's not WordPress related at all but it's talking about the Web standards, and just programming in general, and whatnot, and just being in the Web space. And they were talking about CSS 4 and it's not necessarily gonna be called CSS 4, but it's the next version of CSS, and some of the things that are built in where you can where you can have variables for colors. And then you can say like, "I wanna darken this color," and it'll make it 33 percent darker. So you don't have to figure out if your favorite color is orange like mine, I can pick the orange that I want. From there, I can say, "I want a darker version or a lighter version," based on what I may be doing on my website. So, lots of cool things coming.

As developers, designers, people that are in tech, we normally have the latest version of everything. We go out and get the latest version of computers or we have the latest version of Chrome on our operating system. We have the latest operating system on our computers. We're always trying to get the best things out there; the latest, and greatest, and the newest, and trying out these new technologies. But we forget sometimes that there are other people in this world that don't have access to the latest and greatest version of Chrome or they don't have a computer that can upgrade to mac OS High Sierra. And so they're running a few versions back. So they're running a browser that's a few versions back that doesn't have maybe some of the CSS tools, or CSS properties, or they don't render them properly, and that's why a website sometimes looks wonky.

So let's go ahead and talk about some of these. I've got six different things; six different tools and checks that we can do to make sure that our website looks good on every type of device. One of the first ones I wanna talk about is reset CSS. One of the most annoying problems is when creating a nice first draft like you're getting your website all setup, and you go to show a client, and then all of a sudden, the website looks different, and it's like, "What? What's going on?" And that's happening because a browser can apply browser default CSS to certain elements, making the website look wonky right off the gate. So it's always recommended to start off resetting your browser CSS. So there's code from Meyer Web. It's one that you find in almost all WordPress themes.

Almost every website out there has a reset.css. It's built right into the theme file. Sometimes it's all compiled into the style that CSS. But it's basically the CSS that comes first. And it basically says, "All margins are gonna be zero and all padding's gonna be zero." It's basically resetting everything until we define what we want. So that's the first piece. We wanna make sure that we're using the reset.css from Meyer Web and that's in every website. So even if you have a website that you've been using for the last two, three, four, five years, I would recommend checking out; seeing if this code is in there. Go to the link in the show notes for the Myer Web code, and then go ahead, and check to make sure your CSS is in there just to be on the safe side so that your website looks good on every type of device and every type of browser. So that's the first thing.

You also wanna check to see if there's browser support for the certain elements that you want to use on your website. So, not all browsers are created equal. Maybe the top four main browsers are very, very close and they all have the same CSS styles that we can add but it's not all there yet. For some reason, there are some that are just a little bit lacking and a great tool that we can use as called Can I Use. It is a tool where you just go, "Can I use," and then you say whatever type of CSS elements you wanna use. So maybe we wanna say border, so I'll type, "Can I use border?" I'm just doing this live as we talk through it, and it basically goes in there, and it shows what the latest versions of all of the operating systems are. So it shows that Internet Explorer, the latest version is 11, and then supported version of Edge is 15, 16, and 17. It shows Chrome; all its versions and whatnot.

So it shows you all of those that allow you to use border images, or border radius, or CSS box decoration break. It goes through all of the different elements that have border in them and it shows you which ones it works well. So you wanna go through and you say like, "Okay, this is an important element to me. It needs to be working on every single website that I create." So it's a fun little tool that you can go and see. I would say for the majority of the things, as long as you're not doing some of the new CSS stuff that's coming out, it's gonna work with every browser. But you can't guarantee that. That's why I recommend using Can I Use? And then you can add whatever you wanna use and see if it can be used. So that's checking browser support. Another thing that we wanna do is we wanna make sure that we're not just using global variables or global statuses.

We wanna make sure that we are using ones that are prefixed correctly. And so what this looks like is with, say, for example, we wanna do background, we say linear gradient, and then we say the colors that we want it to be, and it's a fun, little gradient. Well, depending on which browser it calls for a little bit different of a CSS method. So if we wanna make sure it works well in some browsers, we have to prefix the linear gradient with -WebKit and it's very much the same when you do borderers, when you do when you do displays. Sometimes you have to have Web Kit in front of it; sometimes you have to have a MS in front of it. It just really depends and so the next tool that I wanna talk about is called pleeease.io. It's P-L-E-E-E-A-S-E.io. And this gives you the ability to go in, and you can say a border, and it will generate all of the different prefixes, the correct prefixes, for all of the styles, and then you can copy and paste that into your CSS.

Essentially, you would create your standard CSS, and then you run it through this thing called pleeease.io, and then it gives you two panels. So on the left, you paste in your CSS. And on the right, then you can copy in the CSS that has been generated. It's got a lot more lines of code because it gives you all of the different things for the WebKit; for the standard browsers or whatnot. So that's something to think about as well. So that's pleeease.io. Sometimes though, even though we may have added all of the vendor prefixes and the browsers still can't render some of this new stuff that's in there. So even though we have it all defined and we've got it all setup, sometimes it just doesn't work. And so we wanted to go and we want to use this thing called Modernizr. And that's at modernizr.com.

And what this does is it runs a collection of tests really fast on your website as your page loads and then it uses the results to tailor an experience to the user. So what it does is it basically goes in, and it formulates your code, and puts it in different buckets. So it basically will look in and it'll say, "If you're using this browser, then you can put all of this old code in. But if you're using this new browser, you can show off all these awesome new features." So it helps you develop a website that maybe is taking advantage of some of those very, very high end, new CSS properties and styles. But then it also gives you the ability to roll back and show later versions for those older devices. This is something that I haven't even got into myself but it is something that's really cool and you can get this all setup very, very easily within your WordPress site. Give it a try, and check it out, and see what may be happening.

Two more tools here that I want to share with you today. The next one is about how to write better CSS and this is called csslint.net. And basically, it says that it will hurt your feelings. It says, "CSS Lint; we will hurt your feelings and help you code better." So basically, what this is is you basically paste all of your CSS in here. The more, the better. "The Linting works best when we see the big picture. So give us everything you got," it says there. And all it is is a big text box and then you hit Lint. And what that is is it makes sure that that you are properly using CSS correctly. It's going to line up all of the different styles that you're using. It's gonna make sure that you've got the right spacing right. It's gonna do a lot of things. It just helps you to write better code, essentially.

It's gonna go through, and it's gonna make sure that you have semicolons at that the end of things, and make your brackets consistent across all of the all of the commands and whatnot. So that's something to think about as well. So that's CSS Lint and how to write better CSS. And then after you've done all of these things; so you've used all these other tools and, "Okay, I've got it as best as I can," then what you wanna do is you wanna go and double check your work. You can use a tool called BrowserStack and this is a tool that allows you to run your website through dozens of different simulators to show off what your website looks like on different operating systems, or different devices, or different browsers.

You can sign up for free and you can get some views there. I think to get a lot more information, you may have to have a paid trial to do that to look but you can definitely get started for free. But it looks like it is $29.00 per month for the lowest package in there for browsing testing. So what it does is it just allows you to go in, and you put in your URL, and then you can you can look at these things, and see. It's not gonna be the same exact experience you're getting. It may be a little bit hard to troubleshoot. Maybe something you're looking at on the Edge browser. You're like, "Oh, how does this work?" This allows you to view the website inside your browser, inside that browser, if that makes any sense.

You're in your browser; maybe you're using Chrome but you want to see what it looks like in Firefox and you don't want to install Firefox. Or maybe you wanna see what it looks like on Firefox on Windows or if you want to see what Firefox on a mobile device looks like; whatever. You pick what you want, and then you then you can take a look at it after you've worked through, and you make sure that everything looks good. And sometimes, it's not gonna be perfect. There may be little errors here or there and then at some point, you just have to call it and you have to say, "Okay, this is the best as I'm willing to make it. This is as much effort that I want to add to this," and then you can go ahead and just launched a website from there.

But BrowserStack gives you that opportunity to see what errors that other people may be seeing, and you can see them firsthand, and you can see exactly what they are, and then you can debug, and try to figure out how to fix them. So these are some things that I want to talk about today because it's something that we don't really think about. Especially if you add some CSS while you're looking at your website on a computer, you may say, "Oh, I wanna move this button over a little bit," so you add some padding or you push it over with some sort of CSS command. And then you forget totally to look at it on another device or another size. And then all of a sudden that button that you've moved for 45 pixels to the right, on a mobile device, 45 pixels may shove it all the way off the screen, or it's barely readable, or barely visible, or whatnot. So that is something that you need to think about for sure.

Once you make any type of CSS change, I recommend walking through some of these steps. And then from there, doing some testing on your own; just making sure that take your website that you're looking at on your computer, and drag that window from all the way from the right, and make it as small as you can, and that's gonna give you a pretty good visualization of what it looks like on a mobile device. And then you can make the adjustments and changes from there. I know that I don't do this nearly as much as I should. It's probably because I'm not a full time web developer anymore and I'm working on clients' websites but this is definitely something that's very, very important. It's something that we overlook all the time and I just want to bring and emphasize this is a very important thing that we need to be focusing on in 2018. That's what I wanted to share with you this week. Take care and we'll talk again next week. Bye-bye.

Leave a Reply