Вы
не знаете CSS
когда вы в последний раз читали новые черновики?
Месяц назад?
Пол года?
Год?
Что за черновики?!
Вы
не знаете CSS
А где
искать
спеки?
Roadmap
А ведь могли бы и помочь!
Знания
и имя это потенциальные деньги!
Motion Path Module Level 1
.plane {
motion-path: path('M 300,150
Q 900,100 1000,550
L 440,400
Q 470,60 900,100
z');
}1
2
3
4
.plane {
motion-offset: 50%;
}1
2
3
4
.plane {
animation: planefly 10s infinite linear;
}
@keyframes planefly {
0% {
motion-offset: 0;
}
100% {
motion-offset: 100%;
}
}1
2
3
4
.plane {
motion-rotation: 90deg;
}1
2
3
4
.plane {
motion-rotation: reverse;
}1
2
3
4
.plane {
motion: path('M 300,150
Q 900,100 1000,550
L 440,400
Q 470,60 900,100
z') 0 auto;
}
Изображения
.img {
object-fit: cover;
object-position: 100% 50%;
}
object-fit: fill;object-fit: cover;
.container {
background-image: cross-fade(
url(source-1.png),
url(source-2.png),
50%);
}
.container {
background: element(#id);
}
CSS Round Display
Hyojin SongI think CSS Round Display isn’t for the browser in smart watch, but we are considering the situation to make progress our standard activity.
In the webOS-based smart watches most applications are developed using html/css/js, so we need to extend existing CSS specification.
Hyojin SongThe major Web-based platforms are Tizen by Samsung and webOS by LG as well as Firefox OS by Mozilla you mentioned.
MozlandoFarewell Firefox OS smartphones. Mozilla today announced an end to its smartphone experiment, and said that it would stop developing and selling Firefox OS smartphones. It will continue to experiment on how it might work on other connected devices and Internet of Things networks.
Но как я узнаю, что круглый дисплей — круглый?
<link media="screen and (device-radius: 0%)"
rel="stylesheet"
href="rectangle.css" />
<link media="screen and (device-radius: 50%)"
rel="stylesheet"
href="round.css" />@media screen and (device-radius: 0%) {
\* Прямоугольный дисплей *\
}
@media screen and (device-radius: 50%) {
\* Круглый дисплей *\
}Не вижу такого в Media Queries Level 4!
А как заставить текст обтекать границы экрана?
body {
shape-inside: display;
} shape-inside: auto; shape-inside: display;«Я не хочу писать из-за денег. Я хочу, чтобы мне платили за то, что я пишу», — таков принцип де Линта. Нарушая сложившиеся каноны жанров, Чарльз де Линт создает новый жанр. Его произведения — это городские сказки, где в подчеркнуто урбанистическом мире, в вечно спешащем, разноголосом и многонациональном мегаполисе конца ХХ века разворачиваются удивительные и загадочные события. «В этом как раз вся суть, — говорит автор, — поставить мифологический архетип в современные, нарочито реальные обстоятельства. И наоборот — обыкновенного человека, желательно реалиста и материалиста, забросить в подчеркнуто мифологическую ситуацию». Сам писатель определяет своё творчество как «мифологическую фантазию», синтез реализма, мифа и народной сказки.
«Я не хочу писать из-за денег. Я хочу, чтобы мне платили за то, что я пишу», — таков принцип де Линта. Нарушая сложившиеся каноны жанров, Чарльз де Линт создает новый жанр. Его произведения — это городские сказки, где в подчеркнуто урбанистическом мире, в вечно спешащем, разноголосом и многонациональном мегаполисе конца ХХ века разворачиваются удивительные и загадочные события. «В этом как раз вся суть, — говорит автор, — поставить мифологический архетип в современные, нарочито реальные обстоятельства. И наоборот — обыкновенного человека, желательно реалиста и материалиста, забросить в подчеркнуто мифологическую ситуацию». Сам писатель определяет своё творчество как «мифологическую фантазию», синтез реализма, мифа и народной сказки.
Есть в CSS Shapes Module Level 2, но нигде не работает!
А что с рамкой? Которая border?
.container {
border-boundary: display;
} border-boundary: none; border-boundary: display;В CSS Backgrounds and Borders Module Level 4 — ни слова
А что с координатами? [0;0] не существует?
Используем полярную систему координат вместо декартовой!
.element {
display: polar;
polar-angle: …;
polar-distance: …;
polar-origin: …;
polar-anchor: …;
}polar в
CSS Positioned Layout Module Level 3? — Нет, не слышали
Hyojin SongThe implementation has been under discussion in Crosswalk and Blink community, so it needs more time to use CSS Round Display API in browsers.
Привязка скрола
.container {
scroll-snap-type: mandatory;
scroll-snap-stop: always;
scroll-snap-padding: 0;
}
.element {
scroll-snap-margin: 0;
scroll-snap-align: none start;
}.container {
scroll-snap-destination: 0 0;
scroll-snap-points-x: repeat(100%);
scroll-snap-points-y: repeat(20px);
}
.element {
scroll-snap-coordinate: 50px 50px;
}- "Нафтогаз" пояснил покупку бронированного "мерседеса" Стокгольмским арбитражем
- "Манчестер Сити" и "Шальке" провели рекордный трансфер в истории немецкого футбола
- Фестиваль ГОГОЛЬFEST состоится в Киеве 16-25 сентября
- Власти Турции реформируют разведку после попытки переворота в стране
- Савченко считает свой закон идеальным и предлагает переписать другие
- Слова Трампа об Украине не просто предвыборные "ляпы" - CNN
- Тайфун Нида в Китае выворачивал с корнем деревья и разрушал дома
- Россия понесла крупнейшие потери за время войны в Сирии – The Times
- В оккупированном Кировске неизвестные обстреляли машины боевиков – разведка
- В оккупированном Кировске неизвестные обстреляли машины боевиков – разведка
- Церемония открытия Олимпиады в Рио будет недорогой из-за кризиса в Бразилии
- Каждый пятый украинец поддерживает легализацию оружия
- Киев прекратил принимать мусор из Львова из-за ремонта на заводе "Энергия"
- Трамп во главе США сделает развал НАТО легким заданием для Путина – The Atlantic
- В зоне АТО за сутки ранены двое украинских военных
- "Нафтогаз" пояснил покупку бронированного "мерседеса" Стокгольмским арбитражем
- "Манчестер Сити" и "Шальке" провели рекордный трансфер в истории немецкого футбола
- Фестиваль ГОГОЛЬFEST состоится в Киеве 16-25 сентября
- Власти Турции реформируют разведку после попытки переворота в стране
- Савченко считает свой закон идеальным и предлагает переписать другие
- Слова Трампа об Украине не просто предвыборные "ляпы" - CNN
- Тайфун Нида в Китае выворачивал с корнем деревья и разрушал дома
- Россия понесла крупнейшие потери за время войны в Сирии – The Times
- В оккупированном Кировске неизвестные обстреляли машины боевиков – разведка
- В оккупированном Кировске неизвестные обстреляли машины боевиков – разведка
- Церемония открытия Олимпиады в Рио будет недорогой из-за кризиса в Бразилии
- Каждый пятый украинец поддерживает легализацию оружия
- Киев прекратил принимать мусор из Львова из-за ремонта на заводе "Энергия"
- Трамп во главе США сделает развал НАТО легким заданием для Путина – The Atlantic
- В зоне АТО за сутки ранены двое украинских военных
Я — настоящий механник!
А CSS это настоящий язык программирования!
В нём есть переменные! Правда!
:root {
--title-color: #c00;
--text-color: #666;
}.title {
color: var(--title-color);
}
.text {
color: var(--text-color);
}Типографика
Правила набора и вёрстки текста. Для 95% людей кажутся совершенно бесполезными, но на самом деле не менее важны, чем правила орфографии и пунктуации. Помимо основного назначения (красиво оформлять текст) знание типографики (как и других правил) выдаёт IQ индивида и поэтому помогает выигрывать Специальные Олимпиады. В определённых кругах это понятие неразрывно связано с именем Сами-знаете-кого.
В CSS будут кастомные селекторы
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading {
/* Стили заголовков */
}
Можно проверять поддержку свойств
body {
background: red;
}
@supports ( position: polar ) {
body {
background: green;
}
} stack-sizing: stretch-to-fit;
motion-path: path('M 0,0');
article {
hyphenate-character: "~";
hyphenate-limit-zone: 10%;
hyphenate-limit-chars: 5 2 2;
hyphenate-limit-lines: 3;
hyphenate-limit-last: always;
}
article {
orphans: 5;
}Use CSS generated content for decoration and non-vital information, but make sure it’s properly handled by screen readers, so that people with assistive technology are not distracted. Think “progressive enhancement” when deciding whether to use CSS generated content.
orphans: 2;Use CSS generated content for decoration and non-vital information, but make sure it’s properly handled by screen readers, so that people with assistive technology are not distracted. Think “progressive enhancement” when deciding whether to use CSS generated content.
orphans: 5;
.source {
flow-into: content-flow;
}
.target-1 {
flow-from: content-flow;
}
.target-2 {
flow-from: content-flow;
}
aside {
wrap-flow: both;
}
Читайте
черновики
Антон Немцев
http://silentimp.info/
@silentimp
thesilentimp@gmail.com
skype: ravencry
