Assesment wanted for Advanced styling

MDN Learn
#1

Hello, these are my 3 codepens for each task in Test your skills page.
Mdn page

Task 1

Task 2

Task 3

Any help would be appreciated.

1 Like
#2

Hi @CalinObo and welcome to the community :wave:

Amazing styles on these tasks. One can see that you spent a lot of time to tweak the details.

I just have two tiny things:

  • In task 1 I would also include the prefixed appearance in input[type="search"]. The non-prefixed version is only support since one year on Safari.
  • In task 3 you could use the non-bold version of the cross (✕ ✕) to match the weight of the check mark.

Keep up the great work and have a nice day,
Michael

#3

Thank you so much for your reply @mikoMK .

Would you kindly be able to share an article or more info regarding the appearance in input? I know that there are 2 engines such as webkit and blink, blink is implied with safari. Is it a css rule with blink?

Thank you for the non-bold version, on mdn it was just a character with the bolded x, I wanted to use the one without bold but couldn`t find it.

Once again, thank you a lot for your time.

#4

Nowadays, there are three relevant browser engines:

  • WebKit: Safari
  • Blink: Chrome
  • Gecko: Firefox

Chrome formerly used WebKit and forked it in 2013 as Blink. Chrome continued using the -webkit- prefix when they introduced new non-standard properties. In general, vendor prefixes are a thing of the past, but they are still around to not break old code. There’s a glossary entry on MDN about vendor prefixes. It also explains how the problem is solved today.

Regarding appearance I only ever used it like in these exercises to remove any browser specific styling and apply my own.

-webkit-appearance: none;
appearance: none;

To find a specific Unicode character I sometimes look through this list https://en.wikibooks.org/wiki/Unicode/List_of_useful_symbols or search on https://www.fileformat.info/info/unicode/char/search.htm.

I hope that helps. :slightly_smiling_face:

1 Like