Технопарк, весна, 2019 г.
html {
font-size: 62.5%;
font-family: serif;
}
body {
font-size: 1.8rem;
line-height: 1.618;
max-width: 38em;
margin: auto;
color: #4a4a4a;
background-color: #f9f9f9;
padding: 13px;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
font-family: Verdana, Geneva, sans-serif;
font-weight: 700;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
...
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" colspan="3" height="120px">....</td>
</tr>
<tr>
<td class="menu" valign="top">...</td>
<td class="content" valign="top">...</td>
<td class="aSide" valign="top">...</td>
</tr>
<tr>
<td class="footer" colspan="3">...</td>
</tr>
</table>
body {
padding-left: 200px;
padding-right: 190px;
min-width: 240px;
}
header, footer {
margin-left: -200px;
margin-right: -190px;
}
main, nav, aside {
position: relative;
float: left;
}
main {
padding: 0 20px;
width: 100%;
}
aside {
width: 130px;
padding: 0 10px;
margin-right: -100%;
}
footer {
clear: both;
}
.container-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 0 20px;
}
nav {
flex: 0 0 180px;
padding: 0 10px;
order: -1;
}
aside {
flex: 0 0 130px;
padding: 0 10px;
}
body {
display: grid;
min-height: 100vh;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: min-content 1fr min-content;
}
header {
grid-row: 1;
grid-column: 1 / 4;
}
nav {
grid-row: 2;
grid-column: 1 / 2;
padding: 0 10px;
}
main {
grid-row: 2;
grid-column: 2 / 3;
padding: 0 20px;
}
aside {
grid-row: 2;
grid-column: 3 / 4;
padding: 0 10px;
}
footer {
grid-row: 3;
grid-column: 1 / 4;
}
.image {
filter: value;
}
.image {
filter: blur(5px);
}
.image {
filter: brightness(0.5);
}
.image {
filter: contrast(200%);
}
.image {
filter: saturate(400%);
}
.image {
filter: drop-shadow(16px 16px 10px black)
grayscale(100%);
}
.box {
transition-property: transform
background-color;
transition-duration: 1s;
transition-timing-function: ease;
}
.box:hover {
transform: scale(2.5) rotate(180deg)
background-color: palevioletred;
}
@keyframes colors {
from {
background-color: green;
}
to {
background-color: palevioletred;
transform: scale(1.5);
}
}
.box {
animation-name: colors;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
.box {
transform-style: preserve-3d;
transform: perspective(900px);
transform: rotate3d(x, y, z, deg);
transform: translate3d(x, y, z);
}
:root {
--my-color: #FFF;
}
.color-picker {
box-shadow: 0 0 5em var(--my-color, white);
}
// 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)');
$dark-color: #4a4a4a
$light-color: #f9f9f9
$side-color: #eee
body
color: $dark-color
header, footer
background-color: $dark-color
color: $light-color
main
background: $light-color
nav, aside
background: $side-color
@dark-color: #4a4a4a;
@light-color: #f9f9f9;
@side-color: #eee;
body {
color: @dark-color;
}
header, footer {
background-color: @dark-color;
color: @light-color;
}
main {
background: @light-color;
}
nav, aside {
background: @side-color;
}
$font-stack: Helvetica, sans-serif
$primary-color: #333
.login-form {
color: $primary-color;
&__input {
font: 18px $font-stack;
&:active {
background-color: white;
}
}
}
@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.config.js
module.exports = {
plugins: [
require('precss')({/* ...options */}),
require('autoprefixer')({/* ...options */}),
...
]
}
// main.js
import 'styles.css';
@supports (display: flex) {
div { display: flex; }
}
@supports not (display: flex) {
div { float: left; } /* задан альтернативный стиль */
}
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
/* добавляем сюда ваших клёвых стилей */
}
// использование в JS
const supportsFlex1 = CSS.supports('display', 'flex');
const supportsFlex2 = CSS.supports('(display: flex)');
/* button.css */
.button {
width: 200px;
height: 48px;
border-radius: 12px;
}
.primary {
background-color: green;
font-weight: 500;
}
// button.js
import styles from './button.css';
export default function renderButton (title, primary) {
return `
<button class="${styles.button} ${primary ? styles.primary : ''}">
${title}
</button>
`;
}
// main.js
import renderButton from './button.js';
document.body.innerHTML = `
${renderButton('Вжух!', true)}
${renderButton('Очистить')}
`;
<!-- результирующий HTML -->
<button class="button-213ge1hw primary-jh4gd318">
Вжух!
</button>
<button class="button-213ge1hw">
Очистить
</button>
// 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(),
},
};
// ...
const { classes } = jss.createStyleSheet(styles).attach();
document.body.innerHTML = `
<button class="${classes.button}">
Button
</button>
`;
W3C (World Wide Web Consortium — Консорциум Всемирной паутины) — организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет Тимоти Джон Бернерс-Ли
WHATWG (Web Hypertext Application Technology Working Group) — сообщество людей, заинтересованных в развитии Интернета. Было основано в 2004 году производителями браузеров: Apple, Mozilla Foundation и Opera Software. Основным направлением сообщества является развитие HTML и API, необходимого для веб-приложений.
По сути, является форком W3C. WHATWG была недовольна медленными темпами развития стандартов и уклоном W3C в сторону HTML, основанного на XML-синтаксисе
wiki.csswg.org — рабочая группа CSS в рамках консорциума W3C
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;
}
}
@media screen and (color) { /* Для цветных экранов */
body { background: whitesmoke; }
}
/* Для широкоформатных экранов */
@media screen and (min-device-aspect-ratio: 16/10) {
...
}
@media projection { /* проектор */ }
@media handheld { /* смартфоны и носимые устройства */ }
@media tv { /* телевизоры */ }
@media braille { /* устройства для слабовидящих */ }
@media (hover) { /* если на устройстве работает hover */ }
@media (pointer: coarse) { /* тачскрины, управляемые пальцами */ }
@media (pointer: fine) { /* мышь или стилус */ }
@media (pointer: none) { /* нет курсора о_О */ }
<link rel="stylesheet"
<l media="all and (orientation : portrait)"
<l href="portrait.css">
<link rel="stylesheet"
<l media="all and (orientation : landscape)"
<l href="landscape.css">
Относительные
em
— font size of the elementex
— x-height of the element’s fontch
— width of the "0" (ZERO, U+0030) glyph in the element’s fontrem
— font size of the root elementvw
— 1% of viewport’s widthvh
— 1% of viewport’s heightvmin
— 1% of viewport’s smaller dimensionvmax
— 1% of viewport’s larger dimension%
— size as relative to an element's parent objectfr
— represents a fraction of the leftover space in the grid containerАбсолютные
cm
— 1cm = 96px/2.54mm
— 1mm = 1/10th of 1cmQ
— 1q = 1/40th of 1cmin
— 1in = 2.54cm = 96pxpc
— 1pc = 1/6th of 1inpt
— 1pt = 1/72th of 1inpx
— 1px = 1/96th of 1in (со звёздочкой)<picture>
<source
srcset="<список URL c дескрипторами>"
[sizes="<ваши размеры в зависимости от раскладки>"]
[media="<медиавыражение>"]
[type="<mime/type>"]
>
<source ...>
<img src="image.jpg" alt="My image"
</picture>
Retina<img
src="images/400.jpg"
srcset=" 400w, images/800.jpg 800w, images/1200.jpg 1200w"
sizes="(min-width: 700px) 75vw, 100vw"
>
<img
src="images/400.jpg"
srcset="images/800.jpg 2x, images/1200.jpg 3x"
width="400" height="300"
>
<picture>
<source
media="(min-width: 900px)"
srcset="images/original.jpg 1200w"
sizes="100vw"
>
<source
media="(min-width: 700px)
srcset="images/800crop.jpg 800w"
sizes="100vw"
>
<source ...>
<img srcset="images/400crop.jpg 400w" sizes="100vw">
</picture>
Увеличивается в зависимости от размера экранаh1 { font-size: 14px; }
@media (min-width: 320px) {
h1 { font-size: 20px }
}
@media (min-width: 960px) {
h1 { font-size: 40px; }
}
h1 { font-size: 14px + 5vw; }
CSS шлюзы примерh1 { font-size: 20px; }
@media (min-width: 320px) {
h1 { font-size: calc( 3.125vw + 10px ); }
}
@media (min-width: 960px) {
h1 { font-size: 40px; }
}
Значения:<meta name=viewport
<meta content="width=device-width, initial-scale=1">
@viewport {
width: device-width;
height: device-height;
zoom: 2;
user-zoom: fixed;
}
Проблемы:
События mouse-events:
События touch-events:
События pointer-events:
Между событием 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);
});
<!-- роли 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>
Progressive Web App
<link rel=manifest href="/manifest.json">
{
"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",
"related_applications": [ ... ]
"prefer_related_applications": false
"icons": [ ... ]
}
{
"icons": [ {
"src": "/imgs/icon-16.png",
"type": "image/png",
"sizes": "16x16"
}, {
"src": "/imgs/icon-24.png",
"type": "image/png",
"sizes": "24x24"
} ]
}
<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>