Suggestions for CSS - styling the web tutorials

incon4 · September 8, 2017, 2:12pm

Hello. These articles are already fantastic. Just wanted to point out some typos and such(I don’t want to edit them myself as they aren’t mine and I might mess something up):

Controlling list counting section, (first paragraph): in steps “or” more than 1 (a typo: of)

Implementing the code in your demo section
Mentions here .eot, .svg, .ttf which aren’t given by using basic or optimal options in font squirrel webfont generator. You need to click expert. Then you are presented with EOT lite or EOT Compressed. This was confusing for me, not sure if it warrents an edit though.

Background attachment section, (second paragraph), in ‘local’: it is only “support” in Internet Explorer 9+ (a typo: supported).

Border images section
The second code snippet reads: border-image-source: url(border-image.png);
Then further down, under “Putting this all together”, you have the line:
border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
I was an idiot and copyed this code to a css file and opened the html file in firefox committing hotlinking. I wasn’t thinking at the time(very sorry!). I think you should change the https url to border-image.png like you had further up to prevented people doing this. Or maybe a note before it?

Let me know if this was not helpful(i’ve heard the term grammar nazi used before).

chrisdavidmills · September 9, 2017, 11:26am

Thanks very much for submitting these fixes!

I have fixed them all except 1 — the border images issue you highlight can’t really be fixed like this because I have to hotlink to that image in the presented source code for the generated live sample to work. In any case, it doesn’t really matter if you hotlink your example to mine, or link to the local copy as expected. Either way, the example works, and hotlinking is a not a huge issue when you are just beginning to learn web dev. (you probably don’t want to do it as a pro web developer, but you should have learnt by then!)

I also haven’t fixed the web fonts issue quite like you expected. I’ve changed the description to be more general and state that the generated font files will change over time as browser support requirements change, which is the case.

Thank you again.

incon4 · September 9, 2017, 11:41am

Thank you Chris, that looks clearer now. I’ll post any more I find along the way. Let me know if there is anything else I can do to help.

incon4 · September 26, 2017, 10:01pm

I just finished reading the CSS tutorial. It was very well written, easy to understand, and helped me a lot, thanks for writing.

Here are some more typos and things I spotted along the way. Keep in mind I’m only a beginner and not 100% sure about any of them. Feel free to ignore any/all.

Bottom line of summary: new fangled(one word according to google)

Under importance heading: I think “certain rule” should be: certain declaration.

CSS tables heading, 2nd paragraph: “layout elements like they were a table” I think it should be ‘lay out’.

In the note: “Note: You can also layout flex items” lay out i think.

Fixed positioning heading, 6th paragraph, I found this sentence a little hard to read:
"…underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading, because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top."

Recommend this alteration:
"…starts off underneath the heading, because the…"
"…starts off underneath the heading. This is because the…"

Handling list spacing heading, Rules 5–7 bullet point: “and a margin-bottom of 1.5rem — the same as the paragraphs § and list items (li) currently have.” Not sure (li) has margin. Did you mean (ul)/(ol)/(dl) here(or just lists)?

Background shorthand heading, 2nd paragraph: “Any properties not specified in the shorthand will be assigned default properties.” Did u mean default values?

Multiple column floated layouts heading, 1st paragraph: “This is despite (?)that(?) fact that”

Possible updates:

github.com

mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>UK punk bands</title>
  </head>
  <body>
    <table>
      <caption>A summary of the UK's most famous punk bands</caption>
      <thead>
        <tr>
          <th scope="col">Band</th>
          <th scope="col">Year formed</th>
          <th scope="col">No. of Albums</th>
          <th scope="col">Most famous song</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Buzzcocks</th>

This file has been truncated. show original

In the sample markup: ‘summary’ table attribute is used but deprecated.

Idk if you wanna mention, I noticed support for initial and unset in IE seems very limited.

Faux Columns for Liquid Layouts link not working. Checked it on 18th Sep, 19th Sep, 25th Sep 2017 and today.

chrisdavidmills · September 27, 2017, 1:25pm

Wow, thanks for reporting all of these.

I have fixed them all. I don’t think there was a single one I disagreed with For the not working faux columns link, I just deleted the link, as the Cederholm tutorial is really the canonical one anyway.

incon4 · September 27, 2017, 3:18pm

Cool. Glad to have helped