diff options
Diffstat (limited to 'files/ru/web/html/element/input/range/index.html')
| -rw-r--r-- | files/ru/web/html/element/input/range/index.html | 38 |
1 files changed, 19 insertions, 19 deletions
diff --git a/files/ru/web/html/element/input/range/index.html b/files/ru/web/html/element/input/range/index.html index b46af66650..b099b28018 100644 --- a/files/ru/web/html/element/input/range/index.html +++ b/files/ru/web/html/element/input/range/index.html @@ -12,7 +12,7 @@ translation_of: Web/HTML/Element/input/range <div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> -<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправте нам пул реквест.</p> +<p class="hidden">Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул реквест.</p> <p>Если используемый браузер не поддерживает тип <code>range</code>, он будет отображаться как input<code>{{HTMLElement('input/text', 'text')}}.</code></p> @@ -43,7 +43,7 @@ translation_of: Web/HTML/Element/input/range <h3 id="Валидация">Валидация</h3> -<p>Для этого поля нет доступного патерна валидации, но следующая валидация реализованны следующие проверки</p> +<p>Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки</p> <ul> <li>Если значение {{htmlattrxref("value", "input")}} содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдет ошибка некорректного ввода.</li> @@ -75,7 +75,7 @@ translation_of: Web/HTML/Element/input/range <tbody> <tr> <td><code>{{anch("list")}}</code></td> - <td>id элемента <datalist>, который сожержит предопределенные значение (не обязательно)</td> + <td>id элемента <datalist>, который содержит предопределенные значение (не обязательно)</td> </tr> <tr> <td><code>{{anch("max")}}</code></td> @@ -131,11 +131,11 @@ translation_of: Web/HTML/Element/input/range <dl> <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> - <dd id="orient-include">Похоже на -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элемены, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значет что слайдер быдет отображен горизонтально, а <code>vertical</code>- что вертикально .</dd> + <dd id="orient-include">Похоже на -moz-orient не стандартное CSS свойство влияющее на {{htmlelement('progress')}} и{{htmlelement('meter')}} элементы, <code>orient</code> атрибут определяем ориентацию слайдера. Значение <code>horizontal</code>, значит что слайдер будет отображен горизонтально, а <code>vertical</code>- что вертикально .</dd> </dl> <div class="blockIndicator note"> -<p>Note: Следующие атрибуты не применимы: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, и <code>width</code>. Каждый из них будет проигнорирован в случаее употребления.</p> +<p>Note: Следующие атрибуты не применимы: <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, и <code>width</code>. Каждый из них будет проигнорирован в случае употребления.</p> </div> <h2 id="Examples">Examples</h2> @@ -191,7 +191,7 @@ translation_of: Web/HTML/Element/input/range <p>Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определенные HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.</p> -<h5 id="Недекорированный_контроллер_даипазона">Недекорированный контроллер даипазона</h5> +<h5 id="Недекорированный_контроллер_диапазона">Недекорированный контроллер диапазона</h5> <p>Этот результат вы получите, если не укажите атрибут {{htmlattrxref("list", "input")}}, или браузер не будет его поддерживать.</p> @@ -282,12 +282,12 @@ translation_of: Web/HTML/Element/input/range </table> <div class="note"> -<p><strong>Примечание</strong>: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддрживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг {{htmlelement("datalist")}} должен быть стилизован с помощью CSS, так как его свойство {{cssxref("display")}} по умолчанию - <code>none</code>, тем самым скрывая лейблы.</p> +<p><strong>Примечание</strong>: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддерживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг {{htmlelement("datalist")}} должен быть стилизован с помощью CSS, так как его свойство {{cssxref("display")}} по умолчанию - <code>none</code>, тем самым скрывая лейблы.</p> </div> <h3 id="Изменение_ориентации">Изменение ориентации</h3> -<p>По умолчанию, если браузер отображает инпут диапозона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализованно, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ниодин из наиболее используемых браузеров не имплементировал это пока. (Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). также, возможно, <a href="https://github.com/whatwg/html/issues/4177">следующий баг под вопросом</a>.</p> +<p>По умолчанию, если браузер отображает инпут диапазона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализовано, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ни один из наиболее используемых браузеров не имплементировал это пока. (Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). также, возможно, <a href="https://github.com/whatwg/html/issues/4177">следующий баг под вопросом</a>.</p> <p>В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки {{cssxref('appearance')}} для <code>slider-vertical</code>, использование нестандартной ориентации <code>orient</code> в Firefox,или изменение text direction для Internet Explorer и Edge</p> @@ -301,7 +301,7 @@ translation_of: Web/HTML/Element/input/range <h3 id="Standards">Standards</h3> -<p>Следуюя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:</p> +<p>Следуя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:</p> <h4 id="CSS">CSS</h4> @@ -318,11 +318,11 @@ translation_of: Web/HTML/Element/input/range <p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> -<p>К сожалению, большенство браузеров сейчас не поддерживают вертикальные контроллы напрямую.</p> +<p>К сожалению, большинство браузеров сейчас не поддерживают вертикальные контроллы напрямую.</p> <h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3> -<p>Но вы, все же, можете сделать вертикльный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя {{cssxref("transform")}} для поворото элемента на 90 градусов. Посмотрим:</p> +<p>Но вы, все же, можете сделать вертикальный контролл используя горизонтальный контролл. Самый простой способ - использовать CSS: применяя {{cssxref("transform")}} для поворота элемента на 90 градусов. Посмотрим:</p> <div id="Orientation_sample3"> <h4 id="HTML_2">HTML</h4> @@ -355,7 +355,7 @@ translation_of: Web/HTML/Element/input/range transform: rotate(-90deg); }</pre> -<p>Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на 0 и {{cssxref("transform-origin")}} смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поварачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.</p> +<p>Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на 0 и {{cssxref("transform-origin")}} смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поворачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.</p> <p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> @@ -372,7 +372,7 @@ translation_of: Web/HTML/Element/input/range <h4 id="CSS_3">CSS</h4> -<p>Берем только те инпуты что иеют тип range:</p> +<p>Берем только те инпуты что имеют тип range:</p> <pre class="notranslate">input[type="range"] { -webkit-appearance: slider-vertical; @@ -382,11 +382,11 @@ translation_of: Web/HTML/Element/input/range <h3 id="orient_attribute">orient attribute</h3> -<p>В Firefox, реализованно нестандартное свойство <code>orient</code>.</p> +<p>В Firefox, реализовано нестандартное свойство <code>orient</code>.</p> <h4 id="HTML_4">HTML</h4> -<p>Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением <code>vertical</code>:</p> +<p>Используем тот же HTML что и в предыдущем примере и ддобавляем атрибут со значением <code>vertical</code>:</p> <pre class="notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> </pre> @@ -395,7 +395,7 @@ translation_of: Web/HTML/Element/input/range <h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3> -<p>Свойство {{cssxref('writing-mode')}} может быть использовано для специальных эфектов </p> +<p>Свойство {{cssxref('writing-mode')}} может быть использовано для специальных эффектов </p> <h4 id="HTML_5">HTML</h4> @@ -406,7 +406,7 @@ translation_of: Web/HTML/Element/input/range <h4 id="CSS_4">CSS</h4> -<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> +<p>Берем только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right:</p> <pre class="notranslate">input[type="range"] { writing-mode: bt-lr; @@ -416,7 +416,7 @@ translation_of: Web/HTML/Element/input/range <h3 id="Все_вместе">Все вместе</h3> -<p>Каждый из вышеперечисленных примеров работает в своем браузере, мы попробуем обьединить все вместе чтоб добится кроссбраузерности решения:</p> +<p>Каждый из вышеперечисленных примеров работает в своем браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:</p> <h4 id="HTML_6">HTML</h4> @@ -427,7 +427,7 @@ translation_of: Web/HTML/Element/input/range <h4 id="CSS_5">CSS</h4> -<p>Берем только те инпуты что иеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и обавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> +<p>Берем только те инпуты что имеют тип range, меняем writing mode с default на <code>bt-lr</code>, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем <code>-webkit-appearance: slider-vertical</code> для всех -webkit-based браузеров:</p> <pre class="notranslate">input[type="range"] { writing-mode: bt-lr; |