???? ??? ???? ????. ???? ?? ? ?? ?????? ??? ??? ?? ? ??? ????? Amazon Web Services ??? ??? ?? ??? ???? ?????.

???? ?? ?? ???? ?? ??? ??? ?? ???? ???? ? ?? ???? ?????? ??? ?? ? ????.

?????? ?? ?? ????? ???? ????? ??? ????. ??? ??? ??? ??? ???? ??? ?? ???? ??? ??? ??? ?????. ? ??????? ?? ??? ??? ???? ???, "Amazon"?? ??? ? ? ???? ???? ??? ? ??? ????. ? ??? ??? ??? ??? ?????, ??? ??? ?? ???? ????? ??? ?????… CSS :

 <a href="/ref%20=%20nav_logo" aria-label="Amazon" tabindex="6">
  <span> </span>
  <span> </span>
  <span> </span>
</a>

?? ??? "?? ???? ?? ??"??? ???? ?? ?? ???? ???? ??? ???? ????? ????. HREF??? ??? ????? JavaScript (?, ??? ? ??? ?? ?????)? ?? ??? ???? ? ?????.

??? ???? ????? ?? "??"?? ??? ? ?? ?????. "??? ??"? "??? ??"???? ??? ????? ??????. ??? ?? ??? ?? ? ?? ?? ? ??? ?? ?? ?? ??? ????. ? ?????? ?? ???? ?? ??? ???? ?? ??? ???? ?? ? ??? ? ???? ?????.

??? ??? ?? ?? ???? ?? ? ????? ??? ?? ???? ?????? ?? ?? ? ????.

?????, ? ??? ??? ??? ??? ?? ??? ???? ??????. "?? ???"?? "?? ???"??? ???? ??? ??? ?????. ??? ? ??? ???? ????? ?????????.

?? ? ?? ?? ?? ??? ????. ???? "?? ????? ?? ??"???? ? ?? ?? ???? ??? "?? ???"???? ???? ????. ??? ?? ??? ???? ?? ???? ?? ???? ?????? ??? ??????.

??? ?? ??? ? ??? ?? ??? ?? ?? ? ??? ??? ??? ??? ???? ????. ?? ??? ?? ??? ??? ?? ? ??? ??? ??? ?? ?????. ? ??, ? ?? ???? ? ?? ??? ??? ????? ?? ? ? ??? ?????. ??? ??? ?? ??? ?? ??? ????.

????? ?? ?? ??? "?? ?", "??"? "??? ???"?? ??? ?? ??? ??? ????. ? ? ??? ??? ??? ?? ????. ?? CSS? ???? ???? ?? ?? ??? ??? ???? ?? ??? ????? ?? ? ???. ?? ? ?? ??? ??“??, ??”? ????? ???? ?? ??? ????? ?? ? ? ????. ?? ? (? ?? ?? ???)? ?? ? ? ???? ???? ?? ? ?? ?? ??? ? ???? ???? ?? JavaScript? ??? ?? ??? ?????? ????? ????.

"Mac Minis"? ?? ??? ?????. ?? ??? ? (?? ?? ??)?? ???? ??? ?? ??? ????? ??? ? ????. ??? ???? ??? ???? ??? ? ??? ??? ??? ???? ?? ???? CSS? ?? ???? ?????.

Intel Core i3? ???? Mac Mini? ??? ?, ?? ?? ??? ??? ?? Mac ???? ???? ????? ??? ????? ? ???? ???????.

??? ????? ??? ?????? ??? ?? "??? ??"??? ?????. ??? ?? ???? ?? ? ?? ??? ???? ??????.

  ??? ?? 

???? Amazon Prime ???? ?? ??? ????. ??? ?? ???? ????? ???? ??? "?? ??"?? ??? ?????. "?? ??"? ???? ?? ??? Mac Mini? ?? ? ??? ?? ?? Amazon Prime? ????? ??? ??? ????.

?? ?? ??? ????? ?? ? ??? ??? ???? ??? ?? ?? ?????? Mac Mini? ????? ??????. ??? ?? ? 10 ?? ????? ?? ? ??????. "?? ?? (1 ??)"?? ?? ???? ??? ????? ? ?? ?? ?? ?? ???? ????.

????? ??? ?? ?? ??? ?????. ???, ?? ??? ?? ?? ????? ????????. ??? ??? ??? ? ??? ?? ??? ????? ??? ??? ??? ??? ? ???????.

?? Duckduckgo? ??? ?????? CSS- ??? ?? ?? ???? ???? ?? ?????? ??? ?? ?? ??? ??? ? Google ??? ?????.

??? Duckduckgo ????? ?? ???? ??? ???? ???? ?? ?? ??? ??? ????. ?????? ?? ? ? ????. ?? ??? ???? ?? ??, ??? ?? ? ???? ??? ?? ??? ??? ?? ? ?????.

???? ?? ???? ?? ??? ???? ?? ???? ??? ?? ? ?? ?????. ??? ? ???? ???? ?? ? ????? ??? ???? ????. ?? ??? ?? ? ?? ??? ? ?? ??? ??? ? ?? ???? "Duckduckgo? ??????? ?? ??"???. ??? ??? ???? CSS?? ???? ????? ?? ?????.

? ????? ??? ?? ???, ?????? ?? ??? ???? ???? ?? ??? ????. ??? ??? ??? (?? ??? ??? ??? ??? ?? ?? ?? ?? ??? ??????)? ?? ?? ?? ???, ?? ??? ?? ? ?? ???? ???? ??? "Duckduckgo ??"? "??? ??"? ?? ? ?? ?????.

?????, ??? ?? ???? ?? ?? ??? ??? ???? ???? : ?? ?? ????. "S"???? "??"? ???? "X"???? ?? ??? ??? ???? ?????.

??, ??? ???? ??. ??? ?? ??? ? ? ?? ? ? ??? ??? ?? ???? ??? ?? ?? ? ? ??? ?? ?? ???. ??? ??? ??? ???? ?? ?? ? ??? ??? ???? ????.

?? ??? ?? ?? ??, "??", "?? ?? ?? ???", "?? ?? ??", "??? ????"? "??? ??"?? ? ??? ?????. CSS? ??? ? ?? ??? ??? ??? ??? ???? ????. ? ?????“??”?“? ?? ??”??? 4 ?? ? ??? ????.

??? ???? ??? ??, ?? ? ?? ??? ???? ?? ???? ?? ??? ??? ??? ??? ??? ?? ?????. ??? ????? ?? ?? ?? ???? ??? ? ???, ?? ?? ?? ?? ??? ?? ?? ???????? (??? ??).

"??"? ???? "X"??? ?? ?? ??? ?? ? ? ????. ??? ??? ???? ??? ?? "x"? ???? javaScript? ??? ??? ? ??? ?? ???? ??? ?? ? ????. ?? ?? ??? ??“Duckduckgo? ??…

 1. 1 ??? ??? ?? ??? ???? ????
2. 2 ??? ??? ??? ??? ????
3. 3 ??? ??? ???? ????. ??.

?? ?? ??? ???? ?? ???? ??? ?? ?? ?? ?? ???? ????.

? ??

???? ??? ??? ??? ??? ?? ??? ????. ?? ? ??? ??? ???? "[????]? Duckduckgo ??"? ?? ????? ???? ???? ???? ????. ? ??? ??? ???? ?? ???? ?????. ?? ??? ?? ?? ????? ? ??? ???? ?????.

? ?? ??? ? ??? ?? ??? ???? ?? ????.

?? ?? DevTools? ????

? ?,“?? ?? ???? ??”? ? ?? ?? ? ?????“????? ??”??? ??? ?? ? ? ????.

???? "Duckduckgo add… add add add duckduckgo… ???? ???? ?? ?? ?? ?? ??? ??? ????? ???????. ??? ???? ?? ???.

??, ??? ?? ? ?????. ?? ???? ?? ?? ?? ?? ??? ???? ????? ? ?????. ?? ??-??.

???? Duckduckgo ??? ?????? ??? ?? ?????. ? ??? ? ????? ?? ??? ?????. ????? ???? ????.

?? ?? ??? ??????? ???? ??? ?? ? "S"? "X"??? ???? ????? ?????.

?? ???. ?? ??? ??? ?? ??? ?? ?? ? ??????. ?? ??????? ???? ?? ? ??? ??? ????“???? ?? ??? ????? ??? ?????”?? ????. ??? ?? ?? ???? ?? ?? ?? ? ????. ?? ??? ??? ??? ?? ? ??? ???????. ? ???? ?? ???? ???? ??? ?? ? ?? ??? ?? ?????. ??? CSS? ?????? ?? ??? ??? ????. ?????, ?? ?? ?? ? ?????.

????? ?? ??? ?? (? : ???)? ?? ??? ??????? ??? ???? ?? ?? ?? ?????? ???? ??? ?? ? ??? ?????? ?? ? ????. ??? ??? ??? ???? ??? ??? ??? ???? ??????? ? ?? ?? ?? ??? ????? ???? ?????. ?, ??? ??? ?? ????? ?? ?? ????? (??? ??? ? ????) ?? ??? ????, ???? ???, ???? ?? ? ????, ??? ??? ??? ??? ???? ???? ?? ?? ? ???? ?? ?? ? ???? ????. ?? ??? ??? ???? ???????!

??, ??? ???? ????. DevTools? ??? ??????? 831 ?? ??? ? ??? 23.7MB???. ???!

??? ? ?? ??? ??? ??? ????. "??? ???"??? ???? ?????? ????. ??? ??? CSS?? ??? ??????? ???“?? ??”??? ??? ???? ??? ?? ??? ? ????, ?? ?? ? ???? ?? ??? ?? ???? ??????. ??? ? ??? ???? ?? ??? ?? ?? ??? ??????.

??? ?? ?? ???? ??? ??? ??? ??? ????. ?? ??, ?? ?? ? ??????? ?? ???? ???? ?? ??? ????. ?? CSS ????? ???? ??? ?? ? ???? ????? ?? ????? ? ??? ?? ???? ?????. ?, ?? ??? ?? ????? ????…

??, ?? ?? ? ?? ???? ? ???? ???? ????! ??, ?? ? ?? ???? ?? ????? ? ????? ?? ???? ?? ??? ? ????.

?? Skip Link (Yay)? ????. ?? ??? ?? ??????? ?????? ?? ???, ?? ? ? ?? ???????.

????? ?? ? ?? ???? ????? ??? ??? ????. ???? ???? ??? ?? ?? ??? ?????. ???? ?

??? ???? ???? ??“?? Github”?“Jump To”??? ? ?? ????? ?????. ?? ?? ???? ????? ??? ???? ???? ? ?? ??? ?????.

????? ?? ?? ?? ?? ???? ??? ???? ? ???? ????? ??? ????.

?? ??? ???? ?? ??? ??? ?????. ?? ?? ?? ???? ??? ???, ??, ?? ? ?? ??? ???? ?? ??? 2 ? ????? ??? ????. ??? ?? ??, ?? ??? ? ? ??? ?? ??? ???? ?? ? ? ????.

??? ????? ??? ????? ?? ??? ??? ??? ??? ????. ?? ???? ? ??? ?? ?? ??? ??? ??“Github Today”???“??”??? ??? ?????? ?????. ??? ????? ??? ? ???, ?? ??? ?? ?? ?? ???? ??? ????? ?????.

?? ? ?? ? "JavaScript"? "New Pull Request"? ?? ? ? ?????? ?? ? ????. ???? ?? ??? ???? ?? ????? ?? ?, ???? ?? ?? ? ?? ??? ????????? ?????. ??? CSS? ??? ? ? ??? ??? ?????? ??? ??????. ?? ?? ???? ??? ??? ???? ????.

?? ?????? ??, ?? ?? ?? ???? ?? ??? ??? ?? ??? ? ???? ??? ?? ??? ???? ?? ????. ? ??, ?? ?? ?? ????? ???? ?? ??? ?? ???? ??? ? ????. ???? ???? ???? ? ???? ???? ?? ????.

? ???? ??? ?	? ???? ?? ? ??? ?
?? ???? ?? ??? ??? ?? ?? ??? ????? ??? ????.	?? ? SVG? ?? ? ?? ??? ???? ???? ???????.
???? ?? ? ???? SVG ???? ??? ?????.	? ?? ??? ??????.
??? ?? ??? ? ?????.	?? ???? ?? ??? ????? ??????.
	? ?? ???? ?? ??? whitespace ?? line break? ??? ??????.

? ?? ???? ???? ?? ?? ??? ???? ? ?? ???? ??? ?????. ??? ??? ?? ? ???? ?? CSS? ?? ?? ?? ??? ? ???? ???? ????.

????? ?? ?? ??? ??? ?? ?? ??? ????. ??? ????? ??? ? ?? ??? ? ?? ???? "X"??? ??? ????.

?, ??? "??? ??"??? ?? ??? ?? ?? ?? ??? ??? ??????.

? ???? ?? ?? ?? ? ??? ??? ? ?? ??? ?? ?? ???? ?? ? ?? ? ? ??? ??????. ????, ? ??? CSS ????? ?????? ????. ??? ??? ?? ??? ????? ???? ?? ????? ?? ?? ??, ? ??? ? ?? ???? ?? ??? ?? ? ????.

??? ??? ???? ?? ??? ??? CSS? ???? ????. Bummer? ??? ?? ? ?? ?? (? : S ? R)? ??? ?? ???? ????. ??? ??? ??? ???? ??? ??? ??? ??? ??? ?? ???? ?? ?? ?????? ?? ?????. ?? ? ??? ?? ????? ??? ? ?? ???? ?? ??? ???? ??? ???? ?????.

DevTools? ??? ??? ?? ??? SVG ???? HEX NAW ?????. ?? ??? ???? ???? ?? SVG ??? ??? ????. ??? ?? ?? ?? ??? ???? ??? ??? ??? ? ??????. ?? DevTools? ??? ?? ??? ?? ?? ??? ????.

??? ? ?? ??? ?? ??? ????? ???? SVG ??? ?? ?????. ??? ??? ?? ? "X"???? ?? ?? ??? ??, ?? ? ??? ???? ??? ? ? ????.

? SVG? ?? ??? ??? ???? ???? ?????. ??? ?? Github? ??????? ? ??? ???? ?? ??? ? ??? ????.

????? Hex NAW? CSS ??? ??? ?????. ??? ??? ????? ???? ?? ??? ???? ??? ??? ?? ? ? ????. ?? ???? ?? ? ? ??? ??? ? SVG ???? ???? ????????.

Github? ????? Stack Overflow? ?? ? ?? ??? (???? ?? ??)? ????? ???? ??? ? ?????. ???? ?? ?? ??? ??? ????? ??? ?? ? ????? ?????.

????? ?? ????? ?? ?? ???? ? ?? ???? ?? ????. ? ?? ??? ? ??? ??????. ?? ??? ??? ??? ?? ??? ? ? ? ?? ??? ??? ???? ?? ?????. ??? ? ??? ?? ?? ??? ?? SVG ???? ??? ????, ????? ???? ? ??? ? ????. ?? ???? ??????.

?? ??? ???? ???? ?? ??? ?? ??? ?? ?? ??? ?????. ???? ?? ?? ???? ?????. ???, ? ?? ? ? ??? ?? ?? ??? ???? ?? ?? ? ?? ???? ?? ?? ?? ? ? ???? ?? ?????.

?? ?? ??? ?? ???? ?? ? ? ?? ??? ?? ?? ?? ? ??? ?? ? ?? ???? ??? ???? ? ?? ?? ?????. ??? CSS? ??? ??? ? ???? ?? ? ?? ??? ?? ??? ?? ??? ?????? ??? ?????. ?? ? ??? ?? ? ?? ???? ???? ?? ???? ??? ?? ?? ?? ??? ??? ????. ??, ?? ????? ????? ? ???? ??? ?? ? ???? ??? ??? ????.

?? ?? ???? ?? ??? ???? ??, ?? ????? ???? ?? ?? ??? ?? ?? ?? ? ?????? : ????? ??? ?? ??. ?, ??? ????? ? ?? ??? ????? ????? ??? ?? ????? ??? ?? ? ???? ?? ?? ??? ???? ???? ?? ??? ???? ??? ???? ????.

?? ?? ?? ?? ? Wikipedia! ??? ????? ???? ?? ? ??? ??? ??? ?? ???. ??? ???? ???? ???????.

? ?? ?? ???? ?? ?? ? ????? Skip Navigation ??? ????. Globe Image? ?? ? ???? ??? ? ?? ? ????? ???? ??? ?????. ??? ???????. ??? ??? ???? ????? ??? ?? ???? ???? ?? ?? ??? ???? ?? ?? ????. ???, ??? ??, ??? ?? ??? ??? ?? ? ??? ?? ??? ??? ? ??? ???????. ?, ????? ?? ?? ??? ?? ? ????? ??? ????.

?? ? ?? ???? Wikipedia?? ?? ?? ??? ??? ?, ?? ???? ?? ???. ??? ?? Wikipedia? ?? ?, ?? ?? ??? ???? ???? ???? ???? ?? Wikipedia ?? ??? ??????.

???? ???? ??? CSS ???? ? ???? ??? ?? ???? ?? ???? ????. ????? ?? ?? ?? ??? ???? ??? ??? ??? ??? ???? ??? ??? ??? ?? ?? ??? ?? ????? ?????.

?? ??? ? ?? ??? ????????. ???? "Navigation to Navigation"????? ???? ??????? ?????. ??? ?? ??? ?????? ?? ?? ?????? ?? ???? ?????.

CSS? ??? ? ? "More"?? ???? ?? ??? ???? ????????? ????? ??? ???? ??? ???? ??? ??? ???? ????? ??? ????.

??? ??????? ??? ?? ???, "?? ????"? "??"?? ??? ?????? ?????.

?? ??? ???? ??? ?? ??? ??? ? ? ??? ??? ???? ?????. ?? ??, ????? ?? ???? ? ????? ?????.

??? ????? ??? "??"? "??"??? ?????? ????. ??? ??? ???? ??? ??? ???? ?? ? ? ????. ? ?? ??? ?? ?????? ?? ? ?? ? ?? ??? ???? (? ??? Comicneue, OpendySlexic ? System Font ???? ?????). "??"?? ???? ?? ?? ??? ??? ????? ?????. ??, ???? ? ??? ??? ??? ??? ? ????.

? ??? CSS ??? ?? ??? ??? ??? ?? ???? ??? ?? ??? ???? ??? ?? ??? ??? ?????. ?? ??? ? ??? ????? ????? "?/???"??? ??? ???????. ??? ????? ????? ???? ?????. CSS? ?? ??? ??? ??? ???? ???? ?????.

??? ? ?? ??? ???? ?? ? ? ???? ???? ? ??? ?????? ????. ????? ?? ??? ??? ???? ???? ??? ?? ??? ?? ? ?? ?? ??? ??????. CSS? ??? ? ?? ??? ???? ? ??? ? ?? ???? ?? ????? ???? ????. ??? ???? ????, ?? ??? ??? ??? ?? ?? ??? ???? ??? ????.

Wikipedia ??? ???? ?? ? ??? ???? ???? ??? ? ????! ??? ?? SVG? ????. ???? ??? ???? ???? ????.

 <a href="/wiki/main_page" title="?? ??? ??"> </a>

????, "Navigation"? "?? ???"??? ???? ?? ??? ??? ?? ??? ???? ? ?? ?????. ??? ??? ?????? ??? ?? ? ? ???? ?????? ?? ??? ????? ????.

Wikipedia? HTML ??? ?? ????? ? ?? ??? ??? ???? ??? ?????. ??? ????? ? ?? ??? ???? ?????.

Having a hidden link to skip the navigation is a must. Notice how most of the sites we looked at contained navigation links directly in the header. With CSS turned off, those navigations became long lists of links that would be so hard to tab or scroll through for any user. Having a link to skip that would make that experience much better.

The most basic HTML example I've seen is an anchor link that targets an ID where the main content begins.

 <a href="#main">Skip to main content</a>
<!-- etc. -->
<main></main>

And, of course, we can throw a class name on that link to hide it visually so it is not displayed in the UI but still available for both keyboard users and when CSS happens to be off.

 .skip-navigation {
  ?? : 0;
  clip: rect(1px, 1px, 1px, 1px);
  ???? : ???;
  padding: 0;
  ?? : ??;
  height: 1px;
  width: 1px;
}

/* Bonus points for adding :focus styles */

Another pain point we saw in a few cases were text links running together. Whether it was in the navigation, tags, or other linked up meta, we often saw links that were “glued together” in such a way that several individual links appeared to be one giant link. That's either the result of hand-coding the links like that or an automated build task that compresses HTML and removes whitespaces in the process. Either way, the HTML winds up like this:

 <a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Python</a><a href="#">Swift</a>

We can keep the freedom to use spaces or line breaks though, even with CSS disabled. One idea is to lean on flexbox for positioning list elements when CSS is enabled. When CSS is disabled, the list items should stack vertically and display as list items by default.

If the items are tags and should still be separated, then traditional spacing methods like margins and padding are still great and we can rely on natural line breaks in the HTML to help with the style-less formatting. For example, here are line breaks in the HTML used to separate items, flexbox to remove spaces, then styled up in CSS to re-separated the items:

The biggest nuisance in this experiment may have been images exploding on the screen to the point that they dominate the content, take up an inordinate amount of space, and result in a hefty amount of scrolling for all users.

The fix here is rather straightforward because we have HTML attributes waiting for us to define them. Both images and SVG have methods for explicitly defining their width and height.

 <img  src="/static/imghw/default1.png" data-src="/path/to-image.jpg" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="? ?? ?? CSS?? ?? ????? ????" >

<svg width="40px" height="40px" viewbox="0 0 200 200">
  <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
</svg>

Many of the large gaps on the sites we looked at looked like empty space, but they were really white SVGs that blew up to full size and blended into the white background.

So, yes, using the proper width and height attributes is a good idea to prevent monstrous icons, but we can also do something about that white-on-white situation. Using properties like fill and fill-rule as attributes will work here.

 <!-- Icon will be red by default -->
<svg viewbox="-241 243 16 16" width="100px" fill="#ff0000">
  <path d="M-229.2,244c-1.7,0-3.1,1.4-3.8,2.8c-0.7-1.4-2.1-2.8-3.8-2.8c-2.3,0-4.2,1.9-4.2,4.2c0,4.7,4.8,6,8,10.6 c3.1-4.6,8-6.1,8-10.6C-225,245.9-226.9,244-229.2,244L-229.2,244z"></path>
</svg>

 /* ...and it's still red when CSS is enabled */
svg {
  fill: #ff0000;
} 

Lastly, if buttons are initially empty, they need to have visible fallback content. If they use a background image and a title for what the do, use a span containing the title text then add aria-hidden="true" so it doesn't sound like the screen reader is reading the button label twice (eg VoiceOver says, “Add button Add” instead).

 <button title="Add">
  <span aria-hidden="true">Add</span>
??></button>

Then the CSS can be something like this:

 .btn-icon {
  background: url(path/to/icon.svg) 0 0 / 100% 100%;
  height: 40px;
  width: 40px;
}

.btn-label {
  ????? : ??;
  ???? : ???;
  ?? : 0;
}

If there are

 <button>
  <svg width="40px" height="40px" viewbox="0 0 200 200" aria-labelledby="btn-title">
    <title>Add</title>
    <polygon points="80,0 120,0 120,80 200,80 200,120 120,120 120,200 80,200 80,120 0,120 0,80 80,80"></polygon>
  </svg>
??></button>