diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index d7880907f4bd7d..2c55a28cf118a9 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -612,8 +612,7 @@ /ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_генератор /ru/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator /ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны /ru/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds -/ru/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ru/docs/conflicting/Web/CSS/cursor -/ru/docs/Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor /ru/docs/conflicting/Web/CSS/cursor +/ru/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ru/docs/Web/CSS/cursor /ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /ru/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Color /ru/docs/Web/CSS/CSS_colors /ru/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /ru/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts @@ -635,7 +634,6 @@ /ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index /ru/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context /ru/docs/Web/CSS/CSS_Ruby /ru/docs/Web/CSS/CSS_ruby_layout -/ru/docs/Web/CSS/CSS_User_Interface/Использование_URL_значений_для_свойства_cursor /ru/docs/conflicting/Web/CSS/cursor /ru/docs/Web/CSS/CSS_Variables /ru/docs/Web/CSS/CSS_cascading_variables /ru/docs/Web/CSS/CSS_animated_properties /ru/docs/Web/CSS /ru/docs/Web/CSS/CSS_Селекторы /ru/docs/Web/CSS/CSS_selectors diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 38a7dada62aa0c..7a541c76351d9d 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -16426,60 +16426,14 @@ "modified": "2019-03-23T22:57:21.133Z", "contributors": ["Aleksej"] }, - "conflicting/Web/CSS": { - "modified": "2020-05-13T06:10:35.795Z", - "contributors": ["mandalorian7117", "cvrebert"] - }, "conflicting/Web/CSS/:focus-visible": { "modified": "2019-03-23T22:37:34.919Z", "contributors": ["teoli", "DVV", "andreww2012"] }, - "conflicting/Web/CSS/:is": { - "modified": "2019-03-23T22:39:12.816Z", - "contributors": ["BychekRU", "JhonyLe"] - }, - "conflicting/Web/CSS/@viewport": { - "modified": "2019-03-23T22:21:08.056Z", - "contributors": ["Hydrock"] - }, - "conflicting/Web/CSS/CSS_Basic_User_Interface": { - "modified": "2019-03-23T22:05:55.155Z", - "contributors": ["SphinxKnight", "ExE-Boss", "mfluehr"] - }, - "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { - "modified": "2019-09-25T09:43:14.453Z", - "contributors": [ - "RomanBush", - "billlater", - "KadirTopal", - "DmitriyPoltavskiy", - "MrDaedra", - "antenko", - "dixiony", - "SKaznadei", - "iamale" - ] - }, "conflicting/Web/CSS/CSS_Fonts": { "modified": "2019-03-23T22:43:41.613Z", "contributors": ["AlexAlex"] }, - "conflicting/Web/CSS/cursor": { - "modified": "2019-03-23T22:05:55.809Z", - "contributors": ["SphinxKnight", "ExE-Boss", "Cheg"] - }, - "conflicting/Web/CSS/gap": { - "modified": "2020-10-15T22:05:04.554Z", - "contributors": ["oxmap", "slychai85"] - }, - "conflicting/Web/CSS/url()": { - "modified": "2020-04-29T08:14:17.353Z", - "contributors": ["podocenov"] - }, - "conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f": { - "modified": "2020-10-15T22:16:56.689Z", - "contributors": ["opereverzeva", "AliaksandrZahorski"] - }, "conflicting/Web/Guide": { "modified": "2019-03-24T00:00:53.915Z", "contributors": ["Dionys"] diff --git a/files/ru/conflicting/web/css/cursor/index.md b/files/ru/conflicting/web/css/cursor/index.md deleted file mode 100644 index d2bde779d38f73..00000000000000 --- a/files/ru/conflicting/web/css/cursor/index.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Использование URL значений для свойства cursor -slug: conflicting/Web/CSS/cursor -original_slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property ---- - -{{cssref}} - -[Gecko](/ru/docs/Mozilla/Gecko) 1.8 ([Firefox 1.5](/en-US/Firefox/Releases/1.5), SeaMonkey 1.0) поддерживает URL-значения для CSS-свойства {{cssxref("cursor")}} в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko. - -### Синтаксис - -Базовый (CSS 2.1) синтаксис для этого свойства: - -``` -cursor: [,]* ключевое_слово -``` - -Это означает, что устанавливать можно любое количество URL-адресов (отделённых запятой), которые должны сопровождаться одним из ключевых слов, определёнными спецификацией CSS, таких как `auto` или `pointer`. - -Например, такая последовательность значений допустима: - -```css -cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; -``` - -В первую очередь браузер пытается загрузить _foo.cur_. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается _bar.gif_. И если он также не может быть использован, будет использовано значение `auto`. - -Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5): - -``` -cursor: [ [ ]?,]* ключевое_слово -``` - -Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения. - -Пример CSS 3 синтаксиса: - -```css -.foo { - cursor: auto; - cursor: url(cursor1.png) 4 12, auto; -} - -.bar { - cursor: pointer; - cursor: url(cursor2.png) 2 2, pointer; -} - -/* откатываются на 'auto' и 'pointer' в IE, но должны быть установлены отдельны */ -``` - -Первое число определяет координату по оси x, а вторая - по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0). - -### Ограничения - -Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору. - -> **Примечание:** Начиная с Gecko 2.0, Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом `SVG` узле. JavaScript, CSS-анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор. - -В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться размером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами. - -(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32x32 пикселя. Это исправляется в более новых версиях.) - -Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах. - -URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4). - -### Совместимость с другими браузерами - -Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства `cursor`. Тем не менее: - -- IE поддерживает только CUR и ANI форматы. -- IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
БраузерРанняя версияФорматыx-y-координаты
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows и Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
- Начиная с OS X 10.5, Safari (Mac) поддерживает .cur файлы -
diff --git a/files/ru/web/css/cursor/index.md b/files/ru/web/css/cursor/index.md index 76be704a1e96c7..e297ac39a96e59 100644 --- a/files/ru/web/css/cursor/index.md +++ b/files/ru/web/css/cursor/index.md @@ -5,41 +5,71 @@ slug: Web/CSS/cursor {{CSSRef}} -## Описание +CSS-свойство `cursor` устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом. -The **`cursor`** CSS property specifies the mouse cursor displayed when the mouse pointer is over an element. +Внешний вид курсора помогает информировать пользователей об операциях, которые можно выполнять при взаимодействии с элементом, включая: выделение текста, активацию справки или контекстного меню, копирование содержимого, изменение размера таблиц и так далее. +Вы можете указать _тип_ курсора с помощью ключевого слова или загрузить свой значок (с дополнительными резервными изображениями и ключевым словом в качестве резервного варианта отображения). -{{cssinfo}} +{{EmbedInteractiveExample("pages/css/cursor.html")}} ## Синтаксис ```css /* Ключевые слова */ -cursor: pointer; cursor: auto; +cursor: pointer; +/* … */ +cursor: zoom-out; -/* Использование URL и координат */ +/* Использование с обязательным резервным ключевым словом */ +cursor: url(hand.cur), pointer; + +/* Использование URL и координат с обязательным резервным ключевым словом */ cursor: - url(cursor1.png) 4 12, + url(cursor_1.png) 4 12, auto; cursor: - url(cursor2.png) 2 2, + url(cursor_2.png) 2 2, pointer; +/* Использование URL с резервными URL (иногда с координатами) с обязательным резервным ключевым словом */ +cursor: + url(cursor_1.svg) 4 5, + url(cursor_2.svg), + /* …, */ url(cursor_n.cur) 5 5, + progress; + /* Глобальные значения */ cursor: inherit; cursor: initial; +cursor: revert; +cursor: revert-layer; cursor: unset; ``` ### Значения -- `` - - : Ссылка или разделённый запятыми список ссылок: `url(…), url(…), …`, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) **должно** находиться в конце списка значений. See [Using URL values for the cursor property](/ru/docs/CSS/Using_URL_values_for_the_cursor_property) for more details. -- `` `` {{experimental_inline}} - - : Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32. -- Ключевые слова - - : **Наведите курсор на картинку, чтобы увидеть пример в действии:** +- `` {{optional_inline}} + + - : {{cssxref("url", "url()")}} или разделенный запятыми список `url(), url(), …`, указывающий на файл изображения. + В качестве запасного варианта можно указать несколько `url()` на случай, если некоторые типы изображений курсора не поддерживаются. + Резервный вариант, отличный от URL-адреса (одно или несколько ключевых слов), должен находиться в конце резервного списка. + +- ``, `` {{optional_inline}} + + - : Необязательные координаты X и Y, задающие указательную точку курсора. + + Эти значения необходимо указывать в координатах изображения. + Они располагаются относительно верхнего левого угла изображения (соответствует`0 0`) и ограничены размерами изображения курсора. + Если эти значения не указаны, они могут быть прочитаны из самого файла, в противном случае по умолчанию они будут находиться в верхнем левом углу изображения. + +- `keyword` + + - : Ключевое слово _должно_ быть установлено для указания типа используемого курсора или резервного курсора, который будет использоваться, если не удастся загрузить указанные значки. + + Доступные ключевые слова перечислены в таблице ниже. Значения кроме `none` (что означает отсутствие курсора), являются изображением, которое будет использовано для отображения курсора. Вы можете навести указатель мыши на строки таблицы, чтобы увидеть эффект применения различных значений ключевых слов. + +
@@ -302,26 +332,30 @@ cursor: unset;
Категория
-### Формальный синтаксис +## Формальное определение + +{{cssinfo}} + +## Формальный синтаксис {{csssyntax}} ## Примеры +### Задание типа курсора + ```css .foo { cursor: crosshair; } -/* use prefixed-value if "zoom-in" isn't supported */ .bar { - cursor: -webkit-zoom-in; cursor: zoom-in; } -/* standard cursor value as fallback for url() must be provided (doesn't work without) */ +/* Использование резервного ключевого слова обязательно при использовании URL */ .baz { - cursor: url(hyper.cur), auto; + cursor: url("hyper.cur"), auto; } ``` @@ -335,6 +369,5 @@ cursor: unset; ## Смотрите также -- [Using URL values for the cursor property](/ru/docs/CSS/Using_URL_values_for_the_cursor_property) - {{cssxref("pointer-events")}} -- [Cursor Property (MSDN)](http://msdn.microsoft.com/en-us/library/aa358795.aspx) +- {{cssxref("url", "url()")}} function