redmaniack

Thank you :)

Well, english is my second language.

Besides that, what I was really trying to say was that a tool like Normalize.css or Bootstrap's Reboot may be more helpful than the classic CSS reset.

Well, I also somehow expected this kind of feedback too.

I agree my findings are far far away from a specialized audit, but nor did I intended to do one.

I just wanted to check out some of the best practices & stuff, based on my daily experience as a web user and developer.

Please read my comment above, also here's how the above "nesting" compiles to:

.compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { opacity: 1; }

I'm not saying using BEM is a bad thing. Not at all, I'm using it too and like how it plays with Sass/scss.

e.g. I do like how Sass makes it easier to write BEM-like code similar to the below:

// style.scss .btn { ... &--success { ... . } }

// style.css .btn {...} .btn-success {...}

But when abusing Sass nesting and choosing a weak naming convention, the resulted CSS selectors can go wild. Here's an example: https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76e...

Glad you found it interesting. I enjoy to dig into this kind of analysis stuff from time to time:

A while ago I made an HTML study on around 8 million web pages: https://www.advancedwebranking.com/html/

Also, I wrote about this journey on CSS-Tricks: 1. https://css-tricks.com/average-web-page-data-analyzing-8-mil... 2. https://css-tricks.com/random-interesting-facts-htmlsvg-usag...

On accessibility, I'd have loved to try out some screen readers but at the moment I write this article, I thought this accessibility analysis would deserve its own separate topic/article. A11Y is always hard.

https://catalin.red/thoughts-on-accessibility/

Sorry for all these plugs.

To be honest, I blame myself for not opening some pull requests yet, considering the project is open-source.

I'd love to contribute and try to improve things but this task might become gigantic on long-term, as the Mastodon project itself :)

Thank you very much ;)

The thumbs down was meant to be for the use of an icon font nowadays, in this case, FontAwesome. Don't get me wrong, I'm still using FontAwesome for many projects.

The thing is there are so many good reasons to use an SVG icon font system nowadays: pure vector, control over the individual shape symbols, positioning is easier thanks to knowing its exact size etc.

Hehe, just let me know!

Hey, I appreciate your thoughts.

Now, to "defend" myself...

I'm afraid that using a regular table wouldn't allowed me to create this pricing table as it looks now. Although this is called a "pricing table", I think using a table isn't recommended in this case as it is quite restrictive.

Also, I avoided using HTML5 elements like "header" because I didn't wanted to include an extra HTML5 shim (for older browsers) dependency.

Regarding using <b> versus <strong>, this could be a long discussion here :). I think <b> just fits in this case as I don't want to add any importance from a content or SEO perspective.

It's fixed now, 10x!

Hey, thanks for the heads up. I'm updating it now.

There's no problem with the CSS, I just forgot to decrease font size for the featuress list.

Note that Enterprise "100GB Monthly Bandwidth" is rendered on two rows...

Thanks guys for your valuable feedback.

I just updated the article and demo: -Added CSS3 animation support for Mozilla 5+ -Fixed flickering the proper CSS3 animation -CSS3 gradients syntax updated. Now, Safari also renders background stripes.

Once again thanks for your comments! Catalin

It's because the accordion is made with CSS only and it uses the :target pseudo-class. The back button is not "hijacked" :)