Responsive Product Preview Card using CSS Flexbox and Grid

Community feedback

• 

  Luka•180

  @zmora2622Posted 2 months ago

  Don't nest your code so deeply in sass, as you increase the specificity of the classes. It is generally better to leave yourself nesting for pseudo-classes and pseudo-elements. This is brilliantly described in this article: sass-nesting. Great article that was forwarded to me by user @grace-snow when code reviewing one of my projects on FEM.

  The @media rules for low-complexity designs in classes are convenient, but for designs with more complex styles this can be problematic. In addition, there is the repetitive nature of the code when generating CSS.

  It's a shame you gave up on the flexbox :-)

  Mixins are mainly used to create repeatable code, i.e. if you have the same margins or other attributes somewhere, you can create such a template using mixins and load them into classes. Rather, it's for single use and doesn't make much sense that way.

  As far as accessibility is concerned I won't comment, as I am also a beginner in this topic. Instead, focus on the semantics of HTML, creating some strange creations hidden from the user does not particularly make sense. If the structure is created correctly, the reader will read it as it should. I suggest the HTML5 Outliner plugin, which creates a sort of table of contents for the page. See the different tags such as article, section how the page reacts to them. This will give you a general idea of the structure and what to use where.

  You can also write a function that parses px to rem, this will automate the whole process a bit and you won't have to count values from px to rem.

  Translated with www.DeepL.com/Translator (free version)

  Marked as helpful

  0

  ---

  

  py-code314•340

  @py-code314Posted 2 months ago

  Thank you so much for your feedback! Appreciate taking some time to review my code

  1. I don't believe I nested my code "so deeply". I used only 1-level nesting as far as I can see. Do you think it's a bad practice? Is there any suggested upper limit for specificity?
  2. You wrote "creating some strange creations hidden from the user". If you are referring to ::before and ::after pseudo-elements they are hidden from the user intentionally. I was following this advice from MDN. They are for accessibility purpose
  3. Thanks for suggesting 'HTML Outliner' extension as I think it'll be useful for future use
  4. I will definitely use @function px-to-rem in my future projects. Thanks for the tip

  Cheers!!

  0

  

  Luka•180

  @zmora2622Posted 2 months ago

  @py-code314 Run yourself a screen reader such as NVDA and try to read what you have created. I would use a slightly different structure e.g. <span> inside <p> and then add a before class with content. And I would add the strikethrough itself in css using the text-decoration attribute. Alternatively, I would use aria-hidden=‘true’> or even better there could be a span with class sr only to hide, but without before and after. It seems to me that they should be used for something else entirely.. It seems to me that they should be used for something else entirely. The screen-reader read the passage from <del> to me in such a way that I didn't understand what you wanted to convey. But here I would rather wait for a statement from someone who knows the topic of accessibility well. I am still a beginner in this area.

  As far as the nesting is concerned, I used some wrong words. I meant more that you should pay attention to the nesting. sure, they are not done in depth, but if you have a more elaborate HTML structure it will start to become problematic, because sooner or later you will have to add more elements inside and it will no longer be as readable as you would like.

  I am also learning so such a mutual exchange of information is very helpful :-)

  0

  

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  @py-code314 this all sounds good to me. Nothing wrong with this code I can see!

  As the only additional thing nested are inline elements it's not much of an issue. But something to keep an eye on sure for bigger projects. Element selectors can lead to a lot of breakage if/when html has to change.

  With the before and after pseudo content trick I keep meaning to test that out again actually! From what I understand (and since I wrote my original tutorial on it) screen reader support has changed for the s (strike through elememt). So that may be OK to use know without any extra pseudos. I'll try to check it on JAWS, NVDA and VoiceOver next week.)

  Incidentally, strike through and deletion are slightly different things. I'd use strikethrough in this case.

  If course it still may be more explicit to include some sr-only text like "old/original price" and "new/sale price" with those prices.

  0

  

  Luka•180

  @zmora2622Posted 2 months ago

  @grace-snow

  NVDA reads this as ‘169.99 removed’. I don't know if an easier option wouldn't be to add a hidden span with the content ‘price before discount’. The reader will then read the content nicely telling you that this is the price before discount before reading the amount. You need to approach people with disabilities in the same way as a normal user so that the content they receive is the same but also understandable and hiding elements with additional descriptions is not a bad solution either. The trick with before and after is ok, but is that what pseudo-elements are for? Is this tutorial of yours available to read somewhere?

  0

  

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  @zmora2622 that's because they've used "del" and not "s" (removed/deletion not strike through text). It's not quite the right element but span is not the right one as its meaningless when there is an appropriate element right there.

  I need to update this one but the post I referred to is on the same site you previously referenced: https://fedmentor.dev/posts/html-plan-product-preview/

  0

  

  Luka•180

  @zmora2622Posted 2 months ago

  @grace-snow

  Using s has the same effect - 169.99 removed for NVDA. We should approach people with disabilities the same way we approach normal users. When I start nvda, I get a message that tells me nothing. It should work like reading a book chapter by chapter, and so I get a message that something has been deleted. So why is it being read if it has been deleted? From a logical point of view it doesn't make any sense. Definitely better if I have the information that this is the price before the reduction.

  Interestingly, the windows narrator reads it as a number without a cross out. I opened the page, positioned myself on the disabled page and closed my eyes. I've tested these solutions, and I still think that using a hidden span with the information that this is the price before the discount and after the discount is more readable as I move around the page. Of course, everything also depends on the context you want to convey.

  Correct me if I'm wrong :-)

  We have a lot of HTML tags with roles, ARIA, but sometimes I feel that most of them just don't make it easy to convey the content.

  0

  

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  @zmora2622 yep absolutely that's why I said it needs testing again and post updating. User agents change their treatment of these things regularly.

  0

  

  Luka•180

  @zmora2622Posted 2 months ago

  @grace-snow

  If so, I look forward to hearing your findings. I am a very beginner in this field and very interested in this topic, so it is nice to talk to someone very experienced 😀. Thank you for your time and very helpful advice 😊

  0

  

  py-code314•340

  @py-code314Posted 2 months ago

  @grace-snow

  I've changed the <del> to <s> as per your advice.

  1. With <s> and without ::before, ::after VoiceOver is reading it as just 169.99
  2. With <s>, ::before and, ::after VoiceOver reads it as 'old price start' 169.99 'old price end' (I changed the 'content' text to make it more clear to the user)
  3. As I was reading some articles on the internet my understanding was that depending on browser & OS combination screen readers sometimes read the text in ::before, ::after and ignore it some times. So I'm wondering what would be the solution here? That's why these pseudo-elements should be used only for decorative purpose?
  4. If I want to add sr-only text, shouldn't I be using <span> to add the text? And <s> for strike-through text?

  0

  

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  @py-code314 yes exactly, you'd use strike through text to wrap the old price with no pseudo content. Then you'd add some sr-only text in span(s) inside the paragraph eg "old/original price" and "new/sale price" as needed.

  Marked as helpful

  0
• 

  T

  Grace•31,270

  @grace-snowPosted 2 months ago

  Yes exactly. You'd still use the strike through element but place sr-only text inside spans. Eg "old/original price" and "new/sale price".

  1