Change:
```html <style type='text/scss'> <ins> #square { width: 50px; height: 50px; background-color: red; } #rect-a { width: 100px; height: 50px; background-color: blue; } </ins> <del> #awesome { width: 150px; height: 150px; background-color: green; } </del> <ins> #rect-b { width: 50px; height: 100px; background-color: orange; } </ins> </style> <del> <div id="awesome"></div> </del> <ins> <div id="square"></div> <div id="rect-a"></div> <div id="rect-b"></div> </ins> ``` # --solutions-- ```html <style type='text/scss'> <del> @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } #awesome { width: 150px; height: 150px; background-color: green; @include border-radius(15px); } </del> <ins> @mixin shape($w, $h, $bg-color) { width: $w; height: $h; background-color: $bg-color; } #square { @include shape(50px, 50px, red); } #rect-a { @include shape(100px, 50px, blue); } #rect-b { @include shape(50px, 100px, orange); } </ins> </style> <del> <div id="awesome"></div> </del> <ins> <div id="square"></div> <div id="rect-a"></div> <div id="rect-b"></div> </ins> ```

Discussion:
Currently, the instructions within the module happen to be as follows: Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are to browsers, CSS rules using them may need vendor prefixes. Consider : For the sake of clarity, the above instructions should also explicitly point out which bits within the given code snippet are vendor prefixes, instead of just simply mentioning the word vendor prefixes within the instructions and expecting the users to figure out themselves as in which parts within the given code snippet are vendor prefixes. The instructions within the module should be as follows: Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are to browsers, CSS rules using them may need vendor prefixes ( , , etc ). Consider the property below: <img width="522" alt="image" src="https://user-"- Device: Laptop OS: macOS 13.0.1 Browser: Google Chrome Version: 107.0.5304.110 Would love to get some feedback from other members before I proceed ahead with making a PR for this issue. Thanks !
I would be fine with it being more explicit. Not sure if it is really needed but it wouldn't hurt. As an aside, using vendor prefixing to teach Mixins isn't a bad idea but the challenge just hasn't aged well. New features are now hidden behind feature flags and the standards have moved away from vendor prefixing. The box-shadow example seems very outdated.
Hey thanks for sharing the article. After reading the article which you have shared, I can think of the following options: Get rid of vendor prefixing from this challenge ( since the main focus of this challenge is to educate the users about Mixins ) and create a separate challenge to teach users about vendor prefixing. Get rid of the property in this challenge and instead, use such a CSS property in the example, which requires vendor prefixing ( came across an that lists some CSS properties that require vendor prefixing as of 2021 ) Let me know what you think about it.
I wouldn't mind if this was rewritten but everything except parts of the challenge text would need to be changed (the challenge text, the example, the seed code, the requirements, the tests). Motivation for rewriting the challenge: challenge is introducing an unnecessary topic of vendor prefixing. information about vendor prefixing is out of date.

Suggestion: Give a simple example in the challenge text. The mixin will take a font size and a bottom margin, it will reset all other margins. Seed code, in plain CSS to help make the challenge less copy-pasty. Solution/requirements
Thanks for the suggestion I'm happy to work on this issue. I will make a PR for this issue shortly, cheers !
You may want to wait with the PR until we get more consensus. You can start working on it but I can't guarantee that it will be approved if others disagree with the change.
Thanks for letting me know if that's the case, then I will wait and see what others think about the suggested change.
Let's go ahead and open this up, following lasjorg's suggestion above to rewrite the challenge. The entire front-end libraries certification is pretty outdated, and next on our roadmap for a complete overhaul. But this is a pretty low-hanging fruit to hit now.
Hi there, first of all I just want to thank you for the opportunity. This is my first time contributing and I decided to have a go at this issue and this is my attempt: As per suggestions, I removed any references to vendor prefixing as they are unnecessary and outdated. In this rewrite, I kept the general structure of the challenge text but modified to suit the new example code. However, I didn't use the example given by as I think it'll be better to build on the previous challenges. So I did my own simple example about individual styles on headings, which is covered in previous challenges. As for the task itself, I used suggestion with some add-ons. Tagging for visibility. Thank you! :)
Please open a pull request if you'd like your changes reviewed.
Oh right, I have opened a pull request however, I haven't tested the new code at all. Could someone point me to a guide on how to do that?
Hi, I've opened a new PR because I messed up my commit history and the previous PR got closed. Very sorry for the inconveniences, please let me know if there's anything I need to fix. Thank you!