CSS JavaScript

CSS JavaScript ?

CSS JavaScript HTML , . , CSS JavaScript .

CSS

CSS .

CSS HTML , . HTML: , . , . . , .

, . , .

, , . HTML .

""

, ,

<h1>Heading</h1>

<p>Paragraph</p>

<ul>
  <li>My list</li>
  <li>has two items.</li>
</ul>

CSS .

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

.

• , , .
• . .
• .

HTML .

.

<p>The water is <em>very hot</em>.</p>

<p>
  Water droplets collecting on surfaces is called <strong>condensation</strong>.
</p>

.

strong,
em {
  color: #a60000;
}

. . .

, .

<p>
  Web content is marked up using Hypertext Markup Language, or
  <abbr>HTML</abbr>.
</p>

, .

abbr {
  color: #a60000;
}

, . .

.

<p>Visit the <a href="https://www.mozilla.org">Mozilla homepage</a>.</p>

.

a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

(: ), (: ) . , , (: ) . Firefox( ) Chrome( ) .

[Firefox . 4 . .]

[Chrome . 4 . .]

. . .

.

<div>
  <label for="name">Enter your name</label>
  <input type="text" id="name" name="name" />
</div>

form-css.html CSS . ( .)

CSS , , .

. ( ). / . .

.

table-css.html HTML CSS . ( .)

CSS . ( ), .

. .

. . WCAG .

/ . . , .

. , ( ) , . (Tab Enter/Return .)

[ 1 3 . . .]

. . .

visibility:hidden display:none . , .

. .

• Sarah Maddox Firefox (CSS) . Firefox .
• . , Stylus Firefox Stylish Chrome .

. , . , . , ( ) .

JavaScript

JavaScript .

JavaScript , UI 2D 3D . 100% . .

. , , , , , . HTML: .

• : . , , <button> <a> .
• , (: ) .

JavaScript . . , . JavaScript WAI-ARIA . .

3D . WebGL 3D <canvas> . 100% . , .

JavaScript

JavaScript . JavaScript . HTML, CSS JavaScript . .

! JavaScript 3D , . , . JavaScript HTML .

JavaScript . JavaScript , . JavaScript . , .

JavaScript .

• . .
• JavaScript HTML <video> ( <video> ).

. form-validation.html . . .

. JavaScript , (: JavaScript ) . . . .

. <label> .

<label for="name">Enter your name:</label>
<input type="text" name="name" id="name" />

. UI ( ) .

form.onsubmit = validate;

function validate(e) {
  errorList.innerHTML = "";
  for (let i = 0; i < formItems.length; i++) {
    const testItem = formItems[i];
    if (testItem.input.value === "") {
      errorField.style.left = "360px";
      createLink(testItem);
    }
  }

  if (errorList.innerHTML !== "") {
    e.preventDefault();
  }
}

. , (: 4 ) . (if (testItem.input.value === '')) .

. (if (errorList.innerHTML !== '')) (preventDefault() ) ( ). .

errorList .

function createLink(testItem) {
  const listItem = document.createElement("li");
  const anchor = document.createElement("a");

  const name = testItem.input.name;
  anchor.textContent = `${name} field is empty: fill in your ${name}.`;
  anchor.href = `#${name}`;
  listItem.appendChild(anchor);
  errorList.appendChild(listItem);
}

. , / .

errorField (CSS UI ). .

, WAI-ARIA ( ).

<div class="errors" role="alert" aria-relevant="all">
  <ul></ul>
</div>

WAI-ARIA .

JavaScript

JavaScript . .

JavaScript , . . mouseover, mouseout, dblclick . .

( ) . focus blur .

. .

mouse-and-keyboard-events.html ( .) . . .

imgThumb.onmouseover = showImg;
imgThumb.onmouseout = hideImg;

imgThumb.onfocus = showImg;
imgThumb.onblur = hideImg;

. / . ( ) . tabindex="0" .

click . Enter/Return onclick . tabindex . ( .).

!

? . : CSS JavaScript .

CSS JavaScript .

WAI-ARIA!

• Overview: