diff options
Diffstat (limited to 'files/ru/web/api/css_object_model')
| -rw-r--r-- | files/ru/web/api/css_object_model/index.html | 208 | ||||
| -rw-r--r-- | files/ru/web/api/css_object_model/ориентация_экрана/index.html | 183 |
2 files changed, 391 insertions, 0 deletions
diff --git a/files/ru/web/api/css_object_model/index.html b/files/ru/web/api/css_object_model/index.html new file mode 100644 index 0000000000..c9d2a9c8d6 --- /dev/null +++ b/files/ru/web/api/css_object_model/index.html @@ -0,0 +1,208 @@ +--- +title: CSS Object Model (CSSOM) +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM +translation_of: Web/API/CSS_Object_Model +--- +<div>{{DefaultAPISidebar('CSSOM')}}</div> + +<p class="summary"><strong>CSS Object Model</strong><font><font> представляет собой набор API-</font><font>интерфейсов, </font><font>позволяющих манипулировать CSS из JavaScript. </font><font>Это очень похоже на DOM, но для CSS, а не HTML. </font><font>Это позволяет пользователям динамически читать и изменять стиль CSS.</font></font></p> + +<h2 id="Ссылки">Ссылки</h2> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("CaretPosition")}}</li> + <li>{{domxref("CSS")}}</li> + <li>{{domxref("CSSCharsetRule")}}</li> + <li>{{domxref("CSSConditionRule")}}</li> + <li>{{domxref("CSSCounterStyleRule")}}</li> + <li>{{domxref("CSSFontFaceRule")}}</li> + <li>{{domxref("CSSFontFeatureValuesMap")}}</li> + <li>{{domxref("CSSFontFeatureValuesRule")}}</li> + <li>{{domxref("CSSGroupingRule")}}</li> + <li>{{domxref("CSSImportRule")}}</li> + <li>{{domxref("CSSKeyframeRule")}}</li> + <li>{{domxref("CSSKeyframesRule")}}</li> + <li>{{domxref("CSSMarginRule")}}</li> + <li>{{domxref("CSSMediaRule")}}</li> + <li>{{domxref("CSSNamespaceRule")}}</li> + <li>{{domxref("CSSPageRule")}}</li> + <li>{{domxref("CSSRule")}}</li> + <li>{{domxref("CSSRuleList")}}</li> + <li>{{domxref("CSSStyleDeclaration")}}</li> + <li>{{domxref("CSSStyleSheet")}}</li> + <li>{{domxref("CSSStyleRule")}}</li> + <li>{{domxref("CSSSupportsRule")}}</li> + <li>{{domxref("CSSVariablesMap")}}</li> + <li>{{domxref("CSSViewportRule")}}</li> + <li>{{domxref("ElementCSSInlineStyle")}}</li> + <li>{{DOMxRef("FontFace")}}</li> + <li>{{DOMxRef("FontFaceSet")}}</li> + <li>{{DOMxRef("FontFaceSetLoadEvent")}}</li> + <li>{{domxref("GeometryUtils")}}</li> + <li>{{domxref("GetStyleUtils")}}</li> + <li>{{domxref("LinkStyle")}}</li> + <li>{{domxref("MediaList")}}</li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{DOMxRef("MediaQueryListEvent")}}</li> + <li>{{DOMxRef("MediaQueryListListener")}}</li> + <li>{{domxref("PseudoElement")}}</li> + <li>{{domxref("Screen")}}</li> + <li>{{domxref("StyleSheet")}}</li> + <li>{{domxref("StyleSheetList")}}</li> + <li>{{domxref("TransitionEvent")}}</li> +</ul> +</div> + +<p> </p> + +<p dir="ltr" id="tw-target-text">Несколько других интерфейсов также расширены спецификациями, связанными с CSSOM:</p> + +<p dir="ltr">{{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p> + +<h3 id="CSS_Typed_Object_Model" name="CSS_Typed_Object_Model">CSS Typed Object Model {{experimental_inline}}</h3> + +<p>{{SeeCompatTable}}</p> + +<div class="index"> +<ul> + <li>{{DOMxRef("CSSImageValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSKeywordValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathInvert")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathMax")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathMin")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathNegate")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathProduct")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathSum")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMathValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSMatrixComponent")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSNumericArray")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSNumericValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSPerspective")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSPositionValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSRotate")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSScale")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSSkew")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSSkewX")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSSkewY")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSStyleValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSTransformComponent")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSTransformValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSTranslate")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSUnitValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSUnparsedValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("CSSVariableReferenceValue")}} {{experimental_inline}}</li> + <li>{{DOMxRef("StylePropertyMap")}} {{experimental_inline}}</li> + <li>{{DOMxRef("StylePropertyMapReadOnly")}} {{experimental_inline}}</li> +</ul> +</div> + +<h3 id="Obsolete_CSSOM_interfaces" name="Obsolete_CSSOM_interfaces">Устаревшие CSSOM interfaces {{obsolete_inline}}</h3> + +<p>{{obsolete_header}}</p> + +<div class="index"> +<ul> + <li>{{DOMxRef("CSSPrimitiveValue")}} {{obsolete_inline}}</li> + <li>{{DOMxRef("CSSValue")}} {{obsolete_inline}}</li> + <li>{{DOMxRef("CSSValueList")}} {{obsolete_inline}}</li> +</ul> +</div> + +<h2 id="Уроки">Уроки</h2> + +<ul> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Определение размеров элементов</a> (урок нуждается в обновлении,так как он был сделан в эпоху DHTML/Ajax).</li> + <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Управление ориентацией экрана</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("CSS Typed OM")}}</td> + <td>{{Spec2("CSS Typed OM")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS Painting API")}}</td> + <td>{{Spec2("CSS Painting API")}}</td> + <td>Extended the {{DOMxRef("CSS")}} interface with the {{DOMxRef("CSS.paintWorklet","paintWorklet")}} static property.</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Defined the {{DOMxRef("Screen")}} and {{DOMxRef("MediaQueryList")}} interfaces and the {{DOMxRef("MediaQueryListEvent")}} event and {{DOMxRef("MediaQueryListListener")}} event listener.</td> + </tr> + <tr> + <td>{{SpecName("CSSOM")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td>Extended the {{DOMxRef("CSS")}} interface and provides the base for the modern CSSOM specification.</td> + </tr> + <tr> + <td>{{SpecName("Screen Orientation")}}</td> + <td>{{Spec2("Screen Orientation")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Fonts")}}</td> + <td>{{Spec2("CSS3 Fonts")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Animations")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Transitions")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Variables")}}</td> + <td>{{Spec2("CSS3 Variables")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Conditional")}}</td> + <td>{{Spec2("CSS3 Conditional")}}</td> + <td>Defined the {{DOMxRef("CSS")}} interface.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Device")}}</td> + <td>{{Spec2("CSS3 Device")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Counter Styles")}}</td> + <td>{{Spec2("CSS3 Counter Styles")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Style")}}</td> + <td>{{Spec2("DOM2 Style")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>Все эти функции постепенно добавлялись в разные браузеры постепенно: это был довольно сложный процесс, который не может быть сведен в простую таблицу. Пожалуйста, обратитесь к конкретным интерфейсам для его доступности.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a></li> +</ul> diff --git a/files/ru/web/api/css_object_model/ориентация_экрана/index.html b/files/ru/web/api/css_object_model/ориентация_экрана/index.html new file mode 100644 index 0000000000..a6b16cba4a --- /dev/null +++ b/files/ru/web/api/css_object_model/ориентация_экрана/index.html @@ -0,0 +1,183 @@ +--- +title: Разбираемся с ориентацией экрана +slug: Web/API/CSS_Object_Model/ориентация_экрана +tags: + - Ориентация экрана + - Положение экрана + - Руководство +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +<p>{{DefaultAPISidebar("Screen Orientation API")}}{{SeeCompatTable}}</p> + +<p>Ориентация экрана не идентична <a href="/en-US/docs/WebAPI/Detecting_device_orientation">ориентации устройства</a>. +Даже если устройство не способно определить свое положение в пространстве — экран может всегда. А когда устройство знает свою ориентацию, хорошо бы иметь возможность управлять ориентацией экрана для +сохранения или адаптации интерфейса веб-приложения.</p> + +<p>Управление ориентацией экрана доступно в CSS и JavaScript. +Например, <a href="/ru/docs/Web/CSS/Media_Queries/Using_media_queries">использование медиа-запросов</a> позволяет контенту адаптироваться с помощью CSS в зависимости от того, в каком режиме просмотра находится браузер: альбомный (горизонтальный, когда ширина экрана больше высоты) или портретный (вертикальный, высота экрана больше ширины).</p> + +<p>Для определения положения экрана и его блокировки можно воспользоваться <i>JavaScript Screen orientation API</i>.</p> + +<h2 id="Настройка_раскладки_содержимого_по_ориентации_экрана">Настройка раскладки содержимого по ориентации экрана</h2> + +<p>Допустим Вы хотите связать отображение содержимого с ориентацией экрана. Например, добавить панель, растягивающуюся по наибольшему направлению дисплея устройства. Это довольно просто реализовать с помощью медиа запросов.</p> + +<p>Пример. Имеется HTML страница:</p> + +<pre class="brush: html notranslate"><ul id="toolbar"> + <li>A</li> + <li>B</li> + <li>C</li> +</ul> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> +</pre> + +<p>Соответствующий CSS:</p> + +<pre class="brush: css notranslate">/* Сначала зададим простые стили */ + +html, body { + width : 100%; + height: 100%; +} + +body { + border: 1px solid black; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +p { + font : 1em sans-serif; + margin : 0; + padding: .5em; +} + +ul { + list-style: none; + + font : 1em monospace; + margin : 0; + padding: .5em; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: black; +} + +li { + display: inline-block; + margin : 0; + padding: 0.5em; + background: white; +} +</pre> + +<p>Теперь разберемся с поведением страницы в различных случаях ориентации.</p> + +<pre class="brush: css notranslate">/* Для портретного режима отправим панель на верхнюю часть области отображения */ + +@media screen and (orientation: portrait) { + #toolbar { + width: 100%; + } +} + +/* Для альбомного режима пускай панель отображается слева */ + +@media screen and (orientation: landscape) { + #toolbar { + position: fixed; + width: 2.65em; + height: 100%; + } + + p { + margin-left: 2em; + } + + li + li { + margin-top: .5em; + } +} +</pre> + +<p>Результат:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Портреный режим просмотра</th> + <th scope="col">Альбомный режим просмотра</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <div style="max-width: 220px;">{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</div> + </td> + <td> + <div style="max-width: 390px;">{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</div> + </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Примечание:</strong> Медиа запрос по ориентации ссылается на окно браузера (соотношение его размеров), а не на ориентацию устройства.</p> +</div> + +<h2 id="Блокировка_ориентации_экрана">Блокировка ориентации экрана</h2> + +<div class="warning"> +<p><strong>Предупреждение:</strong> Этот API вводится в экспериментальном режиме и доступен в <a href="/ru/docs/Archive/B2G_OS" title="Firefox OS">Firefox OS</a> и <a href="/ru/docs/Mozilla/Firefox_для_Android" title="Firefox for Android">Firefox для Android</a> с приставкой <code>moz</code>, а также для Internet Explorer на Windows 8.1 и выше с приставкой <code>ms</code>.</p> +</div> + +<p>Некоторые устройства (в основном мобильные) могут изменять ориентацию экрана в соответствии с ориентацией самого устройства для удобства восприятия информации пользователем. +Это хорошо подходит для текста, но на некоторое содержимое такое поведение может оказать негативное воздействие. Например, это трагичная ситуация для игры, разработанной под определенную ориентацию.</p> + +<p>Урегулировать вопрос, связанный с изменением положения экрана, поможет интерфейс Screen Orientation API.</p> + +<h3 id="Отслеживание_изменения_ориентации">Отслеживание изменения ориентации</h3> + +<p>Событие {{event("orientationchange")}} возникает каждый раз, когда устройство изменяет ориентацию экрана и самого себя, и может быть отслежено свойством {{domxref("Screen.orientation")}}.</p> + +<pre class="brush: js notranslate">screen.addEventListener("orientationchange", function () { + console.log("The orientation of the screen is: " + screen.orientation); +}); +</pre> + +<h3 id="Запрещаем_поворот_экрана">Запрещаем поворот экрана</h3> + +<p>Любое веб-приложение может заблокировать положение экрана. Методом {{domxref("Screen.lockOrientation()")}} положение блокируется. Разблокирование осуществляется методом {{domxref("Screen.unlockOrientation()")}}.</p> + +<p>Метод {{domxref("Screen.lockOrientation()")}} принимает одну или несколько строк для определения типа блокировки: <code>portrait-primary</code>, <code>portrait-secondary</code>, <code>landscape-primary</code>, <code>landscape-secondary</code>, <code>portrait</code>, <code>landscape</code>. Подробнее: {{domxref("Screen.lockOrientation")}}.</p> + +<pre class="brush: js notranslate">screen.lockOrientation('landscape');</pre> + +<div class="note"> +<p><strong>Примечание:</strong> Положение экрана зависит от конкретной настройки приложения. Если в приложении A экран блокируется на альбомную ориентацию (<code>landscape</code>), а приложение B блокирует экран на портретный режим (<code>portrait</code>), +то переход из приложения A в приложение B (или наоборот) не вызовет событие изменения ориентации экрана {{event("orientationchange")}}, т. к. оба приложения сохраняют заданную ориентацию.</p> + +<p>В то же время, событие {{event("orientationchange")}} может возникнуть в момент блокировки ориентации, если для удовлетворения заданному параметру блокировки изменяется положение экрана.</p> +</div> + +<h2 id="Firefox_OS_и_Android_блокирование_ориентации_через_манифест">Firefox OS и Android: блокирование ориентации через манифест</h2> + +<p>Для Firefox OS и Firefox Android (скоро заработает и в десктопном Firefox) существует более специфичный способ: в файле манифеста Вашего приложения можно указать <a href="/en-US/Apps/Build/Manifest#orientation">ориентацию</a>:</p> + +<pre class="brush: json notranslate">"orientation": "portrait"</pre> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{domxref("Screen.orientation")}}</li> + <li>{{domxref("Screen.lockOrientation()")}}</li> + <li>{{domxref("Screen.unlockOrientation()")}}</li> + <li>{{domxref("Screen.onorientationchange")}}</li> + <li><a href="/en-US/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">The orientation media query</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">A short introduction to media queries in Firefox 3.5</a></li> +</ul> |