New to CSS; Code works but still needs someone to check please

[beingmac]

Hello everyone, I would like to use the following code as my item image gallery on my eBay listings.

http://codepen.io/beingmac/pen/Xpqdey

I am new to CSS actually, so I do not understand the code completely. The code seems to work without any problem, but before applying to all of my eBay listings, I would like someone to check if there is any error and possibly make it better (with correct comments & modify/delete any useless code)

I also pasted this CSS code to http://csslint.net/ to check and they found 3 warnings. Since I am new to CSS, I do not know how to fix these 3 warnings.

Please help and thank you very much!

[I.m.learning]

I don’t normally use CSS Lint; but seems it does good with some errors compared to https://jigsaw.w3.org/css-validator/.

All it’s essentially stating is, if you’re not using a 0(zero) you should use some unit of measurement (px, rem, etc.). For your “*” selector, just put some unit, looks like you’re referencing px.
FROM
* {margin: 1; padding: 1;}
TO
* {margin: 1px; padding: 1px;}

What I understood, and maybe someone else can shed light on this, the at-rules are vendor-specific, meaning they won’t validate through CSS validation. If you test your code in major browsers (IE, Edge, Chrome, FF, Opera, and smartphones), and it works, I wouldn’t concern myself too much.

[Beverleyh]

I do not understand the code completely

Which part don’t you understand? The mechanism that switches the images is the checkbox hack, so here’s a place to start https://css-tricks.com/the-checkbox-hack/

The code seems to work without any problem

Yes, on desktop. On mobile… maybe not so much. I’ve only tested on iPhone 6 Plus but I wasn’t able to select the thumbs at all the first time I loaded the page. The second time, the thumbs selected/changed but crashed Safari immediately… and on every subsequent selection, a page load was triggered thereafter. That may have something to do with being sat inside a CodePen – sometimes the code appears to be more stable on a standalone page. But it would depend on what else is on the page in the outside world (a web page very rarely houses one standalone ‘feature’) – any other scripts and other resource hogging CSS, etc., can collectively crash the browser on lower-powered devices. The number of images (i.e. HTTP requests) might also be to blame – 80 thumbs? Eeek! Too many. Maybe limit them to a much more manageable 8-12.

I would like someone to check if there is any error and possibly make it better (with correct comments & modify/delete any useless code)

Sure, I charge £30 per hour, LOL. Realistically, the good folk here (the ones who voluntarily contribute their experience regularly on forums, also having full time jobs, friends, family life, and personal web projects on the go) will be happy to give you tips and pointers, maybe a snippet of code if the topic personally interests them, but at the end of the day, we expect you to do the research, learning and legwork yourself. To get the best guidance, you’ll need to ask specific questions, for example:

Q: “What triggers the image changes?”
A: “The checkbox hack – check out this link …”

Q: “What makes the images zoom?”
A: “Transform:scale – more info here … ”

A good start is that you’re using the lint tool.

Since I am new to CSS, I do not know how to fix these 3 warnings

What are the warnings? (it takes too long for me to work that out on your behalf when you could provide the info upfront in the forum) Have you Googled them? The lint tool will give you directions to fix the errors/warnings, and a bit more research on what those directions say will guide you to fixing them (or at least into interpreting them in ways that will lead to further research that helps you join the dots a little more easily, or decide if you can safely pass). Example;

“The box-sizing property isn’t supported in IE6” … That’s OK – I can ignore – I’m not supporting old browsers.

[Beverleyh]

All it’s essentially stating is, if you’re not using a 0(zero) you should use some unit of measurement (px, rem, etc.). For your “*” selector, just put some unit, looks like you’re referencing px.
FROM
* {margin: 1; padding: 1;}
TO
* {margin: 1px; padding: 1px;}

Do you mean this warning?

Disallow universal selector – The universal selector (*) is known to be slow.

While the comment on using a unit of measure on values greater than 0 is, in this line, correct, the interpretation of the warning isn’t. The warning is advising that the * selector (which is targeting everything on the page) is slower than targeting a specific element. To remove this warning, the OP should change the selector for something more specific.

I expect that it was at some point * { margin: 0; padding: 0; } (Google “poor man’s CSS reset” for more info) which is removing all the padding and margin for everything on the page, hence, potential speed issues on complex pages. To make it more specific, you would change the selector so that it targets and applies to elements you’re using – ones where you need/want to have their margin/padding completely removed. Example body, html { margin: 0; padding: 0; }

the at-rules are vendor-specific, meaning they won’t validate through CSS validation

Not sure how you arrived at that conclusion. The validator will correctly process vendor-specific CSS regardless of what browser is being used to perform the validation.

[Author]

Posts