A Blog Post with Every HTML Element

Dogpile was the first search engine I ever used. My dad had a buddy who was into tech stuff, who showed us how to use it.

Later I learned about AskJeeves from a cousin who showed me how to download emulators and ROMs (this would have been in the mid-late 90s).

It's funny to think how much of my early tech experiences came from in person interactions. Dad's friend also built the first computer which I owned, which belonged to my grandma until she got a shinier Dell pre-built for a birthday.

I was allowed to "purchase" that machine for the price of two free mows (so $40). This was a steal by any metric. It became the foundation for basically all my computer learning into my preteen and teen years and the centerpiece of my bedroom. I have many fond memories of kicking back in my bedroom with ZSNES or bootleg Family Guy episodes.

Idk that I'd really connected until today how much of an influence that friend of my dad's had on my life, just through a few simple acts of thinking the net was cool and sharing with my family.

And getting sick is a great reason you might use the phone to call into work but it doesn't imply getting sick is therefor the way to run all other phone usage through. I.e. it changes the behavior of the screen reader because it hides the content of the document and a screen reader knows it doesn't make sense to read content that was removed but that doesn't provide any support for why content which only affects screen readers belongs in the styling language as well.

Further point, in case you still disagree whether it makes sense for CSS to include the ability or not: CSS supports pseudo-elements but that doesn't mean tags in your page should be turned into pseudo-elements just because you can.

You can go beyond 6 with ARIA, e.g. role="heading" aria-level="7". I don't know what the limit is. I think it's challenging to find distinct visual styles for many heading levels.

They tried to make the the explicit number irrelevant and infer the level by the number of nested sections, so instead of:

    
      Title
      
        Section
        
          Sub Section
          
            Sub Sub Section
          
        
      
    

You could simply use repeatedly and keep the semantic structure of the former.

    
      Title
      
        Section
        
          Sub Section
          
            Sub Sub Section
          
        
      
    

However this was never implemented by any browser or screen reader and was finally dropped from the standard.

http://html5doctor.com/computer-says-no-to-html5-document-ou...

While we're talking userContent.css hacks, I'd be delighted to share my snippet to make code blocks look like (simplified) Mac windows in case anyone else wants to play with it.

There's definitely room for improvement but I don't think it looks half-bad: https://i.stack.imgur.com/xcyoE.png

    @-moz-document domain("news.ycombinator.com") {

        body {
            font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important;
            font-size: 11pt;
            color: #828282;
            background-color: #1B2835 !important;
        }

        * {
            font-family: -apple-system, "Adobe Clean", -apple-system, Helvetica, sans-serif !important;
        }

        * code {
            font-family: "Fira Code", "Monaco",  "Consolas", "Courier New", monospace !important;
            margin: 0;
            padding: 0;
            font-size: 0.9em;
        }

        code:before {
            content: "⬤⬤⬤";
            position: absolute;
            top: 5px;
            left: 12px;
            color: #ccc;
            letter-spacing: 3px;
            -webkit-text-fill-color: #ccc; /* Will override color (regardless of order) */
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: #223b4f; 
        }
        code:before::first-letter {
            color: #ff5f56 !important;
        }

        pre {
            background-color: #234 !important;
            border-radius: 15px;
            padding: 30px 0px 10px;
            border: 0.5px solid #223B4F  !important;
            box-shadow: inset 0 0 1px #123;
            position: relative;
        }

        table#hnmain{
            background-color: #1B2835 !important;
        }

        a:link {
            color: #bfbfbf !important;
            text-decoration: none;
        }

        .c00 {
            color: #cecece !important; 
        }    

        .cdd {
            color: #768696 !important; 
        }    

        .c5a {
            color: #465666 !important; 
        }


    }