ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. range1. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-range1. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° range1. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Рис. 1. Π’ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…

Бинтаксис создания ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ.

Π—Π΄Π΅ΡΡŒ min β€” минимальноС число Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 0), max β€” максимальноС число (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 100), step β€” шаг измСнСния чисСл (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 1), value β€” Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ value вычисляСтся ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΡƒΠ»Π΅:

ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. range formula. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-range formula. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° range formula. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Атрибуты Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ, Π² Ρ‚Π°ΠΊΠΎΠΌ случаС ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

НСзависимо ΠΎΡ‚ минимального ΠΈ максимального числа ΡˆΠΈΡ€ΠΈΠ½Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° остаётся ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ.

Π‘Π°ΠΌΠΈ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Ρ€Π΅Π΄ΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² «чистом» Π²ΠΈΠ΄Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ связь с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π° Π²ΠΎΡ‚ Π² сочСтании с JavaScript это становится ΠΌΠΎΡ‰Π½Ρ‹ΠΌ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ элСмСнтом интСрфСйса. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 1 с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° измСняСтся Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния, такая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… фотогалСрСях.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 1. ИспользованиС ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°

HTML5 IE 10 Cr Op Sa Fx

ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. range2. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-range2. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° range2. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Рис. 2. Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ JavaScript.

Default:

Square:

Round:

Image:

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π¨Π°Π³ 1) Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ HTML:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π¨Π°Π³ 2) Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ CSS:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

.slidecontainer <
width: 100%; /* Width of the outside container */
>

/* Mouse-over effects */
.slider:hover <
opacity: 1; /* Fully shown on mouse-over */
>

.slider::-moz-range-thumb <
width: 25px; /* Set a specific slider handle width */
height: 25px; /* Slider handle height */
background: #4CAF50; /* Green background */
cursor: pointer; /* Cursor on hover */
>

Π¨Π°Π³ 3) Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ JavaScript:

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ динамичСского Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° для отобраТСния Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ значСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

var slider = document.getElementById(«myRange»);
var output = document.getElementById(«demo»);
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() <
output.innerHTML = this.value;
>

ΠšΡ€ΡƒΠ³Π»Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ

Для создания ΠΊΡ€ΡƒΠ³Π»ΠΎΠ³ΠΎ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ border-radius свойство. Π‘ΠΎΠ²Π΅Ρ‚: УстановитС высоту ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‡Π΅ΠΌ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π΅Ρ€Π°Π²Π½Ρ‹Π΅ высоты (15пкс vs. 25пкс Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅):

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

.slider::-webkit-slider-thumb <
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>

.slider::-moz-range-thumb <
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>

Иконка слайдСр/ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Π° ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ background свойство ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ URL-адрСс изобраТСния:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Бтилизация ΠΈ созданиС скриптов для ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ²

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ, Π΄ΠΎΡ€ΠΎΠΆΠΊΠ° ΠΈ Π±Π΅Π³ΡƒΠ½ΠΎΠΊ

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ состоит ΠΈΠ· Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ пСрСтаскиваСт Π±Π΅Π³ΡƒΠ½ΠΎΠΊ. К Π΄ΠΎΡ€ΠΎΠΆΠΊΠ΅ ΠΈ Π±Π΅Π³ΡƒΠ½ΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ стили, Π½ΠΎ Π½Π΅ скрипты.

ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. slider 070958. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-slider 070958. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° slider 070958. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

ΠžΡΠ½ΠΎΠ²Ρ‹ стилСй

Бтилизация ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ Ρ‚Ρ€ΡƒΠ΄Π½Π°. Для Π±Π΅Π³ΡƒΠ½ΠΊΠ° ΠΈ Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ стили, хотя Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ псСвдоэлСмСнты зависят ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°:

НСльзя ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти сСлСкторы Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π΅, Π΄Π°ΠΆΠ΅ нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ стили ( ΠΊΡ€ΠΎΠΌΠ΅ отступов для Π±Π΅Π³ΡƒΠ½ΠΊΠ° ). Если Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΎΠ΄ΠΈΠ½ сСлСктор, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ Π½Π΅ распознаСт, Ρ‚ΠΎ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π²Π°ΠΌ придСтся ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS Π½Π° сСрвСрной сторонС.

IE ΠΈ MS Edge Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ color ΠΈ border-color Π½Π° Π΄ΠΎΡ€ΠΎΠΆΠΊΠ΅, ΠΈΠ»ΠΈ ΠΎΠ½ΠΈ отобразят стили Π΄ΠΎΡ€ΠΎΠΆΠΊΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, для ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° ΠΈΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΈΠ½Ρ‹Π΅ отступы, Ρ‡Π΅ΠΌ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

CSS шаблон

ВсС эти нСсущСствСнныС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ приводят ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ CSS :

Бвойство appearance ΠΈ ошибка Android WebKit

Моим ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠ»Π°Π½ΠΎΠΌ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ стилям Π±Π΅Π³ΡƒΠ½ΠΊΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π»ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠΈΠΌ. Если ΠΎΠ½ΠΈ Π½Π΅ подходят, Ρ‚ΠΎ ΠΌΡ‹ примСняСм slider-horizontal :

Π—Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ полосы прогрСсса

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки

Π― ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» двиТущийся элСмСнт, Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π½Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π±Π΅Π³ΡƒΠ½ΠΊΠ°, Π½ΠΎ написаниС скриптов Π½Π΅ срабатываСт, ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π±Π΅Π³ΡƒΠ½ΠΊΠ° Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Π’Π°ΠΊΠΆΠ΅ пытался ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° вмСсто ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, Π½ΠΎ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ»Π°ΡΡŒ ΠΏΡ€ΠΎΠ²Π°Π»ΠΎΠΌ. Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ счСтС, ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‚Π°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ подсказку ( которая Π² Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½Π΅ выглядит ΠΊΠ°ΠΊ подсказка ).

Π’ IE/Edge Π΅ΡΡ‚ΡŒ встроСнная подсказка, которая ΠΏΠΎ большСй части Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ стилизована. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π΅:

Бобытия Π²Π²ΠΎΠ΄Π° ΠΈ измСнСния

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ³Π°Π΅Ρ‚ Π±Π΅Π³ΡƒΠ½ΠΎΠΊ ΠΏΠΎ Π΄ΠΎΡ€ΠΎΠΆΠΊΠ΅, ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ события Π²Π²ΠΎΠ΄Π° ΠΈΠ»ΠΈ измСнСния. Одни Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½ΠΎ Β« ΠΏΠΎΡ€ΠΎΠΆΠ΄Π°ΡŽΡ‚ Β» события Π²ΠΎ врСмя пСрСмСщСния, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ – Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС остановки пСрСмСщСния.

ΠŸΡ€ΠΈ отслСТивании дСйствий ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ события Π²Π²ΠΎΠ΄Π° ΠΈ измСнСния. Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ события, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€Π΅ΠΊΡ€Π°Ρ‚ΠΈΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π±Π΅Π³ΡƒΠ½ΠΊΠ°. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…:

Π₯отя ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΠ΅ отслСТиваниС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ пиксСля пСрСмСщСния Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ это. И это ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ Π±Ρ‹ ΠΊ лишним Π·Π°Ρ‚Ρ€Π°Ρ‚Π°ΠΌ рСсурсов, особСнно Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. Но я Π±Ρ‹Π» Π±Ρ‹ Ρ€Π°Π΄, Ссли ΠΊΡ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΎΠΏΡ€ΠΎΠ²Π΅Ρ€Π³Π½Π΅Ρ‚ эти прСдполоТСния.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ html + CSS

ЗдравствуйтС ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ Π²Π΅Π±-мастСра. Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ эффСкт CSS.

БСйчас Π±ΡƒΠ΄Π΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ красивый ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ для сайта. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ-Ρ‚ΠΎ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ просто. Достаточно ввСсти Π² html ΠΊΠΎΠ΄ Ρ‚Π΅Π³ input с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ type=Β»rangeΒ», ΠΊΠ°ΠΊ любой Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠΉΠΌΡ‘Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π° экранС Π½ΡƒΠΆΠ½ΠΎ вывСсти ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ.

Π’ΠΎΡ‚ поТалуйста, вставляСм Π² любом мСстС

ΠΠ΅Π²Π·Ρ€Π°Ρ‡Π½Π΅Π½ΡŒΠΊΠΎ. Π§Ρ‚ΠΎΠ± ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ этот Π±Π΅Π³ΡƒΠ½ΠΎΠΊ красивым, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ css, Π½ΠΎ Π½Π΅ всё Ρ‚Π°ΠΊ просто. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π±Π΅Π³ΡƒΠ½ΠΎΠΊ ΠΏΠΎ своСму.

Π― Π½Π΅ стану Π·Π°Π±ΠΈΠ²Π°Ρ‚ΡŒ Π’Π°ΠΌ ΠΌΠΎΠ·Π³ΠΈ подробностями, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Ρ‚Π°ΠΊ происходит, Π’Ρ‹ ΠΆΠ΅ Π΅Ρ‰Ρ‘ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π’Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ понятно.

Π‘ΠΊΠ°ΠΆΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ± наш Π±Π΅Π³ΡƒΠ½ΠΎΠΊ получился красивым Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Π½Π΄ΠΎΡ€Π½Ρ‹Π΅ (Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹Π΅) прСфиксы.

Π”Π°Π»Π΅Π΅ я Π’Π°ΠΌ Π΄Π°ΠΌ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° с ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‰ΠΈΠΌΠΈ коммСнтариями, ΠΈ Π’Ρ‹ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ Π½Π°ΡƒΡ‡Π½ΠΎΠ³ΠΎ Ρ‚Ρ‹ΠΊΠ° ΠΈ ΠΌΠ°Ρ‚Π΅Ρ€Π½ΠΎΠ³ΠΎ слова (самый Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄), смоТСтС ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Notepad ++ Π½Π°Π΄ внСшним Π²ΠΈΠ΄ΠΎΠΌ Π±Π΅Π³ΡƒΠ½ΠΊΠ°.

ΠŸΡ€ΠΎ Π½Π΅Π·Π½Π°ΠΊΠΎΠΌΡ‹Π΅ элСмСнты ΠΊΠΎΠ΄Π°, Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ·Π½Π°Ρ‚ΡŒ Π½Π° сайтС htmlbook. Π‘ΠΎΠ»Π΅Π΅ понятного ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ описания, с ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ, Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π½Π΅Ρ‚.

Π˜Ρ‚Π°ΠΊ, ΠΊΠΎΠ΄ красивого Π±Π΅Π³ΡƒΠ½ΠΊΠ°:

input[type=range] <
-webkit-appearance : none ;
margin : 50px ;
width : 20% ;
>

input[type=range]:focus <
outline : none ;
>

input[type=range]::-webkit-slider-runnable-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
border : 1px solid #575656 ;
background : #AD020D ;
>

input[type=range]::-moz-range-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
box-shadow : 1px 1px 1px #000 ;
background : #AD020D ;
border : 1px solid #575656 ;
>

input[type=range]::-moz-range-thumb <
box-shadow : 1px 1px 1px #000 ;
border : 1px solid #000000 ;
height : 36px ;
width : 16px ;
border-radius : 40%/60% ;
background : #ffffff ;
cursor : pointer ;
>
/style >
/head >
body >
input type =» range » value =» 0 » max =» 100 «/>
/body >
/html >

А Π²ΠΎΡ‚ ΠΈ ΠΎΠ½ сам, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ:

Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ линия, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ двигаСтся Π±Π΅Π³ΡƒΠ½ΠΎΠΊ, являСтся ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ.

input[type=range] <
-webkit-appearance : none ;
appearance : none ;
width : 260px ;
height : 20px ;
padding : 0 ;
box-shadow : inset 0 0 0 2px #2D7CFA ;
background : #AD020D ;
overflow : hidden ;
>

/* Линия-Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ для Firefox */

input[type=range]::-moz-range-track <
background : none ;
border : none ;
>

/* ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π² Firefox */

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, Ρ‚Π°ΠΊ ΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ:

Π§Ρ‚ΠΎΠ± ΠΌΠ΅Ρ‚ΠΎΠ΄ Ρ‚Ρ‹ΠΊΠ° ΠΈ ΠΌΠ°Ρ‚Π΅Ρ€Π½ΠΎΠ³ΠΎ слова, Π½Π΅ свёлся Ρƒ Вас ΠΊ простому ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ, Π° Π±Ρ‹Π» осмыслСнным ΠΈ, Π·Π½Π°Ρ‡ΠΈΡ‚, Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»ΠΎΠ΄ΠΎΡ‚Π²ΠΎΡ€Π½Ρ‹ΠΌ, я ΡƒΠ±Ρ€Π°Π» ΠΈΠ· ΠΊΠΎΠ΄Π° ΠΎΠ±Π΅ΠΈΡ… ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² участок, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΉ для IE.

ΠŸΠΎΡΡ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΈ Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ Π½Π°ΠΈΠ±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΠΎΡ‚ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ.

Π–Π΅Π»Π°ΡŽ творчСских успСхов.

ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. z. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-z. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° z. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….
ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π°

ΠœΡƒΠΆΡ‡ΠΈΠ½Π° ΡƒΠΏΠ°Π» с дСсятого этаТа, ΠΈ Π½Π΅ разбился. Π’Π°ΠΊ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΈ ΠΏΠΎΡ…ΠΎΡ€ΠΎΠ½ΠΈΠ»ΠΈ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Код ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° располоТСн Π² GitHub Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ внСсти внСсти измСнСния Π² ΠΏΡ€ΠΈΠ²Π΅Ρ€, поТалуйста склонируйтС https://github.com/mdn/interactive-examples ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ ΠΏΡƒΠ» рСквСст.

Валидация

Для этого поля Π½Π΅Ρ‚ доступного ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π° Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ, Π½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ валидация Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ

Если прСдпринята ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ мСньшС минимального, Ρ‚ΠΎ ΠΎΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° min. Аналогично, ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ большС максимального, ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Ρ‚ ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡŽ значСния Ρ€Π°Π²Π½ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρƒ max.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

The values of the list attribute is the id of a element located in the same document. The provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π΅ΡˆΡ‘Ρ‚ΠΊΠΈ Π½ΠΈΠΆΠ΅, для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ΡΡ Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

НС стандартныС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

Examples

НСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² основный ситуаций, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΠ½ΠΏΡƒΡ‚Ρ‹ с range ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ:

Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π² большСй стСпСни интСрСсуСтся ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠΎΠΌ ΠΈ максимумом, Π½Π΅ΠΆΠ΅Π»ΠΈ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ, range ΠΈΠ½ΠΏΡƒΡ‚ являСтся ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. НапримСр, Π² случаС с ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π΅ΠΌ громкости домашнСго стСрСо, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΡƒΠΌΠ°Π΅Ρ‚ «ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ громкости Π½Π°ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ максимума» вмСсто «ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π³Ρ€ΠΎΠΌΠΊΠΎΡΡ‚ΡŒ Π½Π° 0.5».

Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠ° ΠΈ максимума

Настройка Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ значСния

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΡΡ‚Π΅ΠΏΠ΅Π½ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρ€Π°Π²Π½Π° 1, Ρ‚Π΅ΠΌ самым показывая, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ всСгда являСтся Ρ†Π΅Π»Ρ‹ΠΌ числом. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ step контроля стСпСни Π΄Π΅Ρ‚Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. НапримСр, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ 5 ΠΈ 10, с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ Π΄Π²ΡƒΡ… Π·Π½Π°ΠΊΠΎΠ² послС запятой, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ step Π½Π° 0.01:

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ любоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, нСзависимо ΠΎΡ‚ разрядности, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ any для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° step :

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ любоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρƒ 0 ΠΈ Ο€ Π±Π΅Π· ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π½Π° Ρ€Π°Π·Ρ€ΡΠ΄Π½ΠΎΡΡ‚ΡŒ.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ…ΡΡˆ-ΠΌΠ΅Ρ‚ΠΎΠΊ ΠΈ Π»Π΅ΠΉΠ±Π»ΠΎΠ²

ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°

Π’Π°ΠΊ ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ эту Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ, ΠΈ Π½Π° сСгодняшний дСнь Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ… Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС возмоТности, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ HTML, прСдставляСм нСсколько ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½Π° macOS Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡ… ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚.

НСдСкорированный ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°
ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. macslider plain. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-macslider plain. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° macslider plain. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….
ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с Ρ…ΡΡˆ-ΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ
ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. macslider ticks. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-macslider ticks. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° macslider ticks. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….
ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° с Ρ…ΡΡˆ-ΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ ΠΈ Π»Π΅ΠΉΠ±Π»Π°ΠΌΠΈ
ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. macslider labels. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-macslider labels. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° macslider labels. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

ИзмСнСниС ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΈΠ½ΠΏΡƒΡ‚ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π° ΠΊΠ°ΠΊ слайдСр, ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ Π΅Π³ΠΎ Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎΠ± ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π΅Π·Π΄ΠΈΠ» Π² ΠΏΡ€Π°Π²ΠΎ ΠΈ Π² Π»Π΅Π²ΠΎ. Когда ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ слайдСр Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΌΠΎΠ³ Π΅Π·Π΄ΠΈΡ‚ΡŒ Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·. Ни ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π΅ ΠΈΠΌΠΏΠ»Π΅ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π» это ΠΏΠΎΠΊΠ°. (Firefox Π±Π°Π³ 981916, Chrome bug 341071). Ρ‚Π°ΠΊΠΆΠ΅, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π±Π°Π³ ΠΏΠΎΠ΄ вопросом.

Рассмотрим ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°:

ScreenshotLive sample
ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. Orientation sample1. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-Orientation sample1. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Orientation sample1. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Π­Ρ‚ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€ (ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ ΠΌΠ΅Ρ€Π΅ Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ).

Standards

БлСдуя спСцификации, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ просто ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ высота оказалась большС ΡˆΠΈΡ€ΠΈΠ½Ρ‹:

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

ScreenshotLive sample
ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. Orientation sample2. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-Orientation sample2. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Orientation sample2. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

К соТалСнию, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² сСйчас Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Ρ‹ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ.

transform: rotate(-90deg)

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, это CSS для самой ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΊΠΈ; это ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ дисплСя ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ располоТСния Π½Π° страницС; ΠΏΠΎ сути, ΠΎΠ½ Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ страницы для слайдСра, Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Ρ‘Ρ€Π½ΡƒΡ‚Ρ‹ΠΉ слайдСр Π² Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ пространствС, Π½Π΅ создавая бСспорядка.

Π—Π°Ρ‚Π΅ΠΌ информация ΠΎ стилС элСмСнта Π² Π·Π°Ρ€Π΅Π·Π΅Ρ€Π²ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ пространствС:

Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€Π° это Π½Π°Π±ΠΎΡ€ ΠΈΠ· 150 пиксСлСй Π΄Π»ΠΈΠ½Ρ‹ ΠΈ 20 пиксСлСй высоты. ΠœΠ°Ρ€ΠΆΠΈΠ½Π³ΠΈ установлСны Π½Π° 0 ΠΈ transform-origin (en-US) смСщаСтся Π² сСрСдину пространства, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ вращаСтся слайдСр; ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ слайдСр ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 150 пиксСлСй, ΠΎΠ½ вращаСтся Ρ‡Π΅Ρ€Π΅Π· ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΏΠΎ 150 пиксСлСй с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны. Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π°Ρ‡Π°Π»Π° ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Π½Π° 75px ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ оси ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ Π²ΠΎΠΊΡ€ΡƒΠ³ Ρ†Π΅Π½Ρ‚Ρ€Π° этого пространства. НаконСц, ΠΌΡ‹ ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌ ΠΏΡ€ΠΎΡ‚ΠΈΠ² часовой стрСлки Π½Π° 90Β°. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚: ΠΈΠ½ΠΏΡƒΡ‚ range, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вращаСтся Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ максимальноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ находится свСрху, Π° минимальноС снизу.

ScreenshotLive sample
ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. Orientation sample3. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html Ρ„ΠΎΡ‚ΠΎ. ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html-Orientation sample3. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΊΠΎΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² html. ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Orientation sample3. ΠŸΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Π²Π²ΠΎΠ΄Π° чисСл Π² ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅, Π½ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ поля ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ интСрфСйс ΠΈ примСняСтся Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π½Π΅ особСнно Π²Π°ΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. На рис. 1 продСмонстрирован Π²ΠΈΠ΄ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

appearance property

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ HTML Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

Π‘Π΅Ρ€Ρ‘ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ ΠΈΠ½ΠΏΡƒΡ‚Ρ‹ Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚ΠΈΠΏ range:

orient attribute

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ HTML Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈ добавляСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ vertical :

writing-mode: bt-lr;

Бвойство writing-mode ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использовано для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ HTML Ρ‡Ρ‚ΠΎ ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

ВсС вмСстС

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² своём Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΌΡ‹ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ всС вмСстС Ρ‡Ρ‚ΠΎΠ± Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ кроссбраузСрности Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:

ΠžΡΡ‚Π°Π²ΠΈΠΌ orient Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ vertical для Firefox:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *