Ulepszanie kodów HTML i css

Prefix'y

Prefix'y głównych przeglądarek:

• -webkit- (Chrome, Safari, nowsze wersje Opera, prawie wszystkie przeglądarki iOS (w tym Firefox dla iOS))
• -moz- (Firefox)
• -o- (Old, pre-WebKit wersje Opery)
• -ms- (Internet Explorer i Microsoft Edge)

Instalacja auto-prefixera

npm install --save-dev gulp-autoprefixer

Uruchomienie

gulp.task('W9auto', function () {
    var autoprefixer = require('gulp-autoprefixer');
    return gulp.src('c:/xampp/htdocs/WWW/W9/css/W09.css')
        //.pipe(autoprefixer({browers: ['last 2 versions']}))
        .pipe(autoprefixer({browers: ['>1%']}))
        .pipe(gulp.dest('c:/xampp/htdocs/WWW/W9/distr'));
});

Przed

.example {
  display: flex;
  transition: all .5s;
  user-select: none;
  background: linear-gradient(to bottom, white, black);
}

Po

.example {
  display: -ms-flexbox;
  display: flex;
  transition: all .5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: linear-gradient(to bottom, white, black);
}

Strona online: autoprefixer.github.io.

---

Varia

Mail

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

Bardziej rozbudowana wersja

<a href="mailto:example@tutorialspark.com?subject=Feedback">Powiedz nam</a> 
co sądzisz o tej stronie.

Telefon

Zadzwoń pod numer <a href="tel:+4894452687">445-2663</a> aby potwierdzić wizytę.

---

ARIA

Web Accessibility Initiative's Accessible Rich Internet Applications specification.

Żródło : https://www.w3.org/TR/wai-aria/

It is estimated that around 10% of the population worldwide has a disability that affects Internet use.

role: alert, button, definition, grid, gridcell, heading, list, listitem, menu, menubar, term, tree ...

Case study - I

• Źle: <span class="red-button">Pobierz</span>
• Dobrze: <span class="red-button" role="button" tabindex="0">Pobierz</span>
• Źle: <button class="red-button" role="button">Pobierz</button>

Przykłady

<button aria-label="Close" onclick="myDialog.close()">X</button>

<label for="lastName">Last name:</label>
<input id="lastName" type="text" aria-required="true" />

Zasady stosowania ARIA

Zasada I

Staraj się stosować podstawowe znaczniki HTML.

Zasada II

Staraj się nie zmieniać semantyki HTML:

• Źle: <h2 role="tab">Punkt I</span>
• Dobrze: <div role="tab"><h2>Punkt I<h2> </div>

Zasada III

Wszystkie interaktywne elementy ARIA muszą być dostępne z poziomu klawiatury.

Zasada IV

KONTRAST

• http://wave.webaim.org/
• web accessibility in maind

Złe rozwiązanie

Stosowanie fontów skalowalnych vw: Bad.html.