Современные возможности CSS, разработка под мобильные устройства

Технопарк, весна, 2018 г.

Стили. Разработка под мобильные устройства
Слайды доступны по ссылке
frontend-park-mailru.firebaseapp.com

Стили и CSS

CSS is awesome

CSS is awesome

PLAY

Кто придумывает WEB?

W3C — www.w3.org

W3C (World Wide Web Consortium — Консорциум Всемирной паутины) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет Тимоти Джон Бернерс-Ли

Любой стандарт W3C проходит 5 стадий согласования:
и только после этого официально становится рекомендацией W3C

WHATWG — whatwg.org

WHATWG (Web Hypertext Application Technology Working Group) — сообщество людей, заинтересованных в развитии Интернета. Было основано в 2004 году производителями браузеров: Apple, Mozilla Foundation и Opera Software. Основным направлением сообщества является развитие HTML и API, необходимого для веб-приложений.

По сути, является форком W3C. WHATWG была недовольна медленными темпами развития стандартов и уклоном W3C в сторону HTML, основанного на XML-синтаксисе

Сейчас WHATWG активно разрабатывает спецификации: HTML, DOM Standard, Fetch Standard, Web workers, Storage Standard, Streams Standard...

CSS — Cascading Style Sheets

CSS одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web»

wiki.csswg.org — рабочая группа CSS в рамках консорциума W3C

Все CSS-спецификации — www.w3.org/Style/CSS/specs.en.html

Управление разметкой

		.container-flex {
		    display: flex;
		}
		 
		.container-grid {
		    display: grid;
		}
		 
	
A Complete Guide to Flexbox
A Complete Guide to Grid

CSS-фильтры

					.image {
					    filter: value;
					}
					 
				

CSS-фильтры

					.image {
					    filter: blur(5px);
					}
					 
				

CSS-фильтры

					.image {
					    filter: brightness(0.5);
					}
					 
				

CSS-фильтры

					.image {
					    filter: contrast(200%);
					}
					 
				

CSS-фильтры

					.image {
					    filter: saturate(400%);
					}
					 
				

CSS-фильтры

					.image {
					    filter: drop-shadow(16px 16px 10px black)
					            grayscale(100%);
					}
					 
				

CSS-транзиции

					.box {
					    transition-property: transform
					                         background-color;
					    transition-duration: 1s;
					    transition-timing-function: ease;
					}
					.box:hover {
					    transform: scale(2.5) rotate(180deg)
					    background-color: palevioletred;
					}
					 
				

CSS-анимации

		@keyframes colors {
		    from {
		        background-color: green;
		    }
		    to {
		        background-color: palevioletred;
		        transform: scale(1.5);
		    }
		}
		 
	

CSS-анимации

		.box {
		    animation-name: colors;
		    animation-duration: 2s;
		    animation-direction: alternate;
		    animation-iteration-count: infinite;
		}
		 
	

CSS-анимации

CSS Animations and Web Animations API

3D-трансформации

		.box {
		    transform-style: preserve-3d;
		    transform: perspective(900px);
		    transform: rotate3d(x, y, z, deg);
		    transform: translate3d(x, y, z);
		    
		}
		 
	

3D-трансформации

CSS-variables

			:root {
			    --my-color: #FFF;
			}
			.color-picker {
			    box-shadow: 0 0 5em var(--my-color, white);
			}
			 
		

CSS-variables from JS

			// get value
			document.documentElement.style
			     .getPropertyValue('--my-color');
			 
			// set value
			document.documentElement.style
			     .setProperty('--my-color', 'green');
			document.documentElement.style
			     .setProperty('--my-color', 'var(--fancy-color)');
			 
		

Окей, новый CSS — это 🔥

Препроцессоры CSS

Тысячи их!

Тысячи их!

SCSS

		$font-stack:    Helvetica, sans-serif
		$primary-color: #333
		 
		.login-form {
		    color: $primary-color;
		    &__input {
		        font: 18px $font-stack;
		        &:active {
		            background-color: white;
		        }
		    }
		}
		 
	

SCSS — миксины

		@mixin border-radius($radius) {
		  -webkit-border-radius: $radius;
		     -moz-border-radius: $radius;
		      -ms-border-radius: $radius;
		          border-radius: $radius;
		}
		 
		.button {
		    @include border-radius(10px);
		}
		 
	

PostCSS

Использование PostCSS

		// postcss.config.js
		module.exports = {
		    plugins: [
		        require('precss')({/* ...options */}),
		        require('autoprefixer')({/* ...options */}),
		        ...
		    ]
		}
		 
		// main.js
		import 'styles.css';
		 
	

CSS Modules

Использование CSS Modules

		/* button.css */
		.button {
		    width: 200px;
		    height: 48px;
		    border-radius: 12px;
		}
		 
		.primary {
		    background-color: green;
		    font-weight: 500;
		}
		 
	

Использование CSS Modules

		// button.js
		import styles from './button.css';
		 
		export default function renderButton (title, primary) {
		    return `
		        <button class="${styles.button} ${primary ? styles.primary : ''}">
		            ${title}
		        </button>
		    `;
		}
		 
	

Использование CSS Modules

		// main.js
		import renderButton from './button.js';
		 
		document.body.innerHTML = `
		    ${renderButton('Вжух!', true)}
		    ${renderButton('Очистить')}
		`;
		 
	

Использование CSS Modules

		<!-- результирующий HTML -->
		 
		<button class="button-213ge1hw primary-jh4gd318">
		    Вжух!
		</button>
		<button class="button-213ge1hw">
		    Очистить
		</button>
		 
	

JSS

Использование JSS

		// main.js
		import jss from 'jss';
		import preset from 'jss-preset-default';
		import color from 'color';
		 
		// One time setup with default plugins and settings
		jss.setup(preset());
		const styles = {
		    button: {
		        width: 200,
		        background: color('blue').darken(0.3).hex(),
		    },
		};
		 
	

Использование JSS

		// ...
		const { classes } = jss.createStyleSheet(styles).attach();
		 
		document.body.innerHTML = `
		    <button class="${classes.button}">
		        Button
		    </button>
		`;
		 
	

Разработка под мобильные устройства

StatCounter, Oct 2016

Native vs. Web

Native vs. Web

Подходы к разработке под
мобильные устройства

Как определить возможности
устройства?

Медиа-запросы (Media Queries)

A media query is a method of testing certain aspects of the user agent or device that the document is being displayed in

		@media screen and (max-width: 1900px) {
		    .container {
		        width: 70vw;
		        max-width: 1200px;
		    }
		}
		 
	

Использование в CSS

		@media screen and (color) { /* Для цветных экранов */
		    body { background: whitesmoke; }
		}
		 
		/* Для широкоформатных экранов */
		@media screen and (min-device-aspect-ratio: 16/10) {
		    ...
		}
		 
	

Использование в CSS

		@media projection { /* проектор */ }
		@media handheld { /* смартфоны и носимые устройства */ }
		@media tv { /* телевизоры */ }
		@media braille { /* устройства для слабовидящих */ }
		 
		@media (hover) { /* если на устройстве работает hover */ }
		 
		@media (pointer: coarse) { /* тачскрины, управляемые пальцами */ }
		@media (pointer: fine) { /* мышь или стилус */ }
		@media (pointer: none) { /* нет курсора о_О */ }
		 
	

Использование в HTML

		<link rel="stylesheet"
		    media="all and (orientation : portrait)"
		    href="portrait.css">
		 
		<link rel="stylesheet"
		    media="all and (orientation : landscape)"
		    href="landscape.css">
		 
	

CSS директивa @supports

		@supports (display: flex) {
		    div { display: flex; }
		}
		 
		@supports not (display: flex) {
		    div { float: left; } /* задан альтернативный стиль */
		}
		 
	

CSS директивa @supports

		@supports (display: -webkit-flex) or
		          (display: -moz-flex) or
		          (display: flex) {
		 
		    /* добавляем сюда ваших клёвых стилей */
		}
		 
	
		// использование в JS
		const supportsFlex1 = CSS.supports('display', 'flex');
		const supportsFlex2 = CSS.supports('(display: flex)');
		 
	

Единицы измерения длины CSS

Единицы измерения CSS
подробнее

Относительные

Единицы измерения CSS
подробнее

Абсолютные

Типы пикселей — подробнее

Пиксели? Пиксели!

Пиксели? Пиксели!

Область просмотра (viewport)

Область просмотра (viewport)

Область просмотра (viewport)

			<meta name=viewport
			      content="width=device-width, initial-scale=1">
			 
		
Значения:

CSS-правило @viewport

		@viewport {
		     width: device-width;
		     height: device-height;
		     zoom: 2;
		     user-zoom: fixed;
		}
		 
	

Оптимизация графики для Retina-экранов

Нативное взаимодействие

Нативное взаимодействие

Проблемы:

Зоопарк событий

События mouse-events:

Зоопарк событий

События touch-events:

Решение

Зоопарк событий

События pointer-events:

pointer-events

300-ms задержка

Между событием touchend и click проходит 300-350ms

		html {
		    touch-action: manipulation;
		    touch-action: auto;
		    touch-action: pan-x; /* pan-x */
		    touch-action: pinch-zoom;
		}
		 
	

Чего-то не хватает?

Решение

		// HammerJS - http://hammerjs.github.io/
		const hammertime = new Hammer(element, options);
		hammertime.on('swipe', function(event) {
		    console.log(event);
		});
		 
	

Accessibility — тред на Habranabr

ARIA — Accessible Rich Internet
Applications — MDN

		<!-- роли ARIA -->
		<header role="banner">
		<div role="alert">Alert!</div>
		 
		<!-- атрибуты ARIA -->
		<input type="radio" aria-checked="true">
		<button aria-hidden="true" style="display: none;">
		    Don't Click Me
		</button>
		 
	

What Makes a Good Mobile Site?

Mobile Web App Checklist

Что ещё?

https://native-pwa.firebaseapp.com/

Web App Manifest

Progressive Web App

		<link rel=manifest href="/manifest.json">
		 
	

Web App Manifest

		{
		    "name": "Calculator",
		    "short_name": "Calc",
		    "lang": "ru-RU",
		    "start_url": "/index.html",
		    "display": "fullscreen", // standalone, minimal-ui, browser
		    "orientation": "landscape", // portrait, any
		    "background_color": "#0F0848",
		    "theme_color": "#0F0848",
		    "icons": [ ... ]
		}
		 
	

Web App Manifest

		{
		    "icons": [ {
		            "src": "/imgs/icon-16.png",
		            "type": "image/png",
		            "sizes": "16x16"
		        }, {
		            "src": "/imgs/icon-24.png",
		            "type": "image/png",
		            "sizes": "24x24"
		        } ]
		}
		 
	

Web App Manifest

Apple meta-tags

		<link rel=apple-touch-icon href="/imgs/icon-152.png">
		<meta name=theme-color content=#0F0848>
		 
		<meta name=application-name content="Calc">
		<meta name=apple-mobile-web-app-title content="Calc">
		 
		<meta name=mobile-web-app-capable content=yes>
		<meta name=apple-mobile-web-app-capable content=yes>
		<meta name=apple-mobile-web-app-status-bar-style content=#0F0848>
		 
	

Полезные ссылки

Всем спасибо!