Zaawansowane style CSS i preprocesory w praktyce
LICZBA DNI: 2 (16h)
KOD KURSU: CSS/STYLE
Dostosowany program 
O szkoleniu
DLA KOGO?
Szkolenie jest adresowane do osób uczących się tworzenia stron internetowych, posiadających już podstawową wiedzę w tym zakresie oraz do developerów chcących pogłębić wiedzę o nowości w zakresie CSS
WYMAGANIA
Znajomość podstaw HTML lub wybranego systemu CMS z edytorem HTML
Znajomość podstaw CSS
ZALETY
Szkolenie kompleksowo przygotowuje do pracy z CSSem z wykorzystaniem najnowszych standardów i trendów
Cele szkolenia
Dogłębne poznanie CSSa, umożliwiające tworzenie rozbudowanych, estetycznych layoutów stron i aplikacji internetowych w technologii RWD
Program
(Nieoczywiste) podstawy CSS
- selektory
- grupowanie selektorów
- !important
- kolory
- jednostki
- elementy następne (+, ~)
- stylowanie w zależności od atrybutów np.[type="text"]
- priorytety reguł
- pseudo-selektory (nth-child, first-child, odd, even, last-child, first-of-type, etc.)
- pseudo-elementy i elementy formularzy oraz obrazki
- @import css i jego wady
- stylowanie kursora
- zapisy skrócone
Stylowanie formularzy
- domyślne style (webkit-appearance*, border, input: text, number, range)
- stosowanie klas do określania stanu elementu
- stylowanie pseudo-elementów wbudowanej walidacji formularzy
- zagnieżdżanie elementów celem zwiększenia możliwości stylowania
- stylowanie ostrzeżeń walidacji natywnej w HTML
Canvas
- domyślne rozmiary
- CSS a Canvas
Multimedia w CSS
- osadzanie video
- nakładanie efektów na obraz dzięki blend-mode
Animacje
- transform
- transition
- definiowanie klatek kluczonych
- biblioteki do animacji
- animacje poprzez nadawanie i zdejmowanie klas
Dodatkowe efekty graficzne
- mieszanie warstw CSS
- Clipping mask (Chrome)
- SCG clipping mask
- CSS reflex
RWD i Media Queries
- ogólne zasady RWD
- Automatyzacja RWD z wykorzystaniem SCSS
- RWD tabel (przewijanie wewnętrzne, ukrywanie kolumn)
- wykrywanie orientacji ekranu (portrait i landscape)
- rozpoznawanie touchable i clickable device
"Mobile" CSS
- CSS, a usability
- Wzorce do stosowania na urządzeniach mobilnych
- ViewPort
- Obrazki na wyświetlaczach Retina
- RWD
Style pod druk
- wycinanie kolorów, tła
- ustawianie tekstu
- definicje kartek papieru
Braki w CSSie
- jeśli element jest większy niż 500px to...
- brak informacji o strukturze HTML na poziomie definiowania reguł CSS
- brak możliwości “chwytania” rodziców i elementów poprzednich
- sam HTML określa przez strukturę wygląd
- wsparcie standardu* CSS w różnych przeglądarkach
- problemy z urządzeniami mobilnymi
- “Webkit” to nie cała przeglądarka
Usability
- obszary aktywne większe niż się wydaje
- szybkie kliknięcia i CSS
Wydajność CSSa
- rendering
- operacje na DOM
- zasobożerność efektów graficznych
- recalculate layout, repaint, composition
CSS dla osób niewidomych
- podkład muzyczny podczas odczytywania tekstu
- określenie balansu przy odtwarzaniu dźwięku
Dobre praktyki
- wersjonowanie GIT
- utrzymanie dużych projektów CSS - Sposoby dzielenia plików
- konwencje nazewnicze
- definicje bez efektów ubocznych
Preprocesory CSS
- LESS vs SASS / SCSS vs Stylus
- parsowanie SCSS - NetBeans, Compass, node.js SASS
- formaty wyjściowe
- minifikacja
- tworzenie plików map
SCSS - podstawowe pojęcia
- zmienne
- operatory
- zagnieżdżanie
- dziedziczenie / rozszerzanie klas
Instrukcje sterujące
- @import
- pętle
- instrukcje warunkowe
SCSS - tworzenie mixinów
- parametry wejściowe
- wyłuskiwanie wartości zmiennych
- mixiny łączące wiele funkcjonalności
- @content
SCSS - Korzystanie z funkcji
- funkcje wbudowane
- pisanie własnych funkcji
- funkcja czy mixin
SCSS - zagadnienia dodatkowe
- klasy abstrakcyjne / placeholders
- tworzenie rozbudowanych mixinów i stosowanie ich
- @extend vs @include
- pułapki i ich obchodzenie
- @debug
- dobre praktyki
Szkolenia powiązane
