Forms

More input types

HTML 4.1

button - кнопка

checkbox - флажки, позволяют выбрать более одного варианта из предложенных

file - поле для ввода имени файла, который пересылается на сервер

hidden - скрытое поле, оно никак не отображается на веб-странице

password - обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками

radio - переключатели, используются, когда следует выбрать один вариант из нескольких предложенных

reset - кнопка для сброса введенных данных

submit - кнопка для отправки данных формы на сервер

text - текстовое поле

More input types

HTML 5

color - виджет для выбора цвета

date - поле для выбора календарной даты

datetime - указание даты и времени

email - поле для ввода e-mail

number - поле для ввода чисел

range - ползунок для выбора чисел в диапазоне

tel - поле для номера телефона

time - поле для времени

url - поле для ссылок

More input types

HTML 5.1

month - поле для ввода месяца и года

​week - поле для ввода недели и года

​datetime-local - поле для ввода времени и даты (отличие от datetime в добавлении часового пояса)

Check spelling

hidden attribute

<p hidden>This paragraph should be hidden.</p>

Figure captions

The <figcaption> tag represents a caption or a legend belonging to the <figure> element which is a container for visuals, such as illustrations, photos, and diagrams. Previously, the <figcaption> tag could be used only as the first or last child of the <figure> element. HTML 5.1 has loosened this rule, and now <figcaption> can appear anywhere within its <figure> container.

Nesting

Вложенность элементов

<article>
    <header>
        <section class="menu">
            <header class="menu-title"></header>
        </section>
    </header>
</article>

Content manipulation

<details> and <summary>

Context menu

Манипуляции с контекстным меню

<div contextmenu="rightclickmenu">Right click me</div>
<menu type="context" id="rightclickmenu">
</menu>

Pictures

srcset

Specifies the URL of the image to use in different situations

srcset="large.jpg 1024w,
        medium.jpg 640w,
        small.jpg 320w"

sizes

Specifies image sizes for different page layouts

sizes="(min-width: 36em) 33.3vw,
       100vw"

Picture element

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

The <picture> tag gives web developers more flexibility in specifying image resources.

Picture element

The <source> element has the following attributes:

• srcset (required) - defines the URL of the image to show
• media - accepts any valid media query that would normally be defined in a CSS
• sizes - defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
• type - defines the MIME type

The <img> element is required as the last child tag of the <picture> declaration block.

Calculation

calc()

.full-size-div {
    margin: 0 10px;
    width: calc(100% - 20px);
}

Animations

@keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

• Отрабатывает при загрузке страницы
• Позволяет анимировать не только числовые значения
• Позволяет добавлять переходные значени

transition

Устанавливает эффект перехода между двумя состояниями элемента

• Отрабатывает при смене класса или состояния элемента.
• Позволяет анимировать только числовые значения свойств.
• Свойства можно анимировать только от значения A к значению B, переходное состояние добавлять нельзя

.box {
    height: 300px;
    width: 300px;
    background-color: #00ff00;
}
.box:hover {
    height: 0;
    transition: height 1s ease-out 0.5s; /* после анимируемого свойства! */
}

animation + @keyframe

vs

transition

Колонки

Columns

В CSS3 появилась возможность создавать колонки и наделять их следующими свойствам:

column-count - количество колонок

column-gap - размер пробела

column-rule - стиль разделителя между колонками

column-width - ширина колонки

columns - ширина колонки + кол-во колонок