Allow css: user-select — CSS | MDN

user-select — CSS | MDN

Свойство CSS user-select определяет может ли пользователь выбрать текст. Оно не влияет на контент, загруженный как chrome, за исключением текстовых блоков.

/* Ключевые слова в значении */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Глобальные значения */
user-select: inherit;
user-select: initial;
user-select: unset;
/* Специфичные для Mozilla значения */
-moz-user-select: none;
-moz-user-select: text;
-moz-user-select: all;
/* Специфичные для WebKit значения */
-webkit-user-select: none;
-webkit-user-select: text;
-webkit-user-select: all; /*Не работает Safari; используйте только
                             "none" или "text", или, в противном случае, оно
                             будет разрешать ввод в <html> контейнер */
/* Специфичные для Microsoft значения */
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
Начальное значение
auto
Применяется квсе элементы
Наследуетсянет
Обработка значениякак указано
Animation typediscrete
none

Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект Selection может содержать эти элементы.

auto

Вычисляемое значение, автоматически определяется следующим образом:

  • Для псевдо-элементов ::before и ::after вычисляемое значение — none
  • Если элемент является редактируемым, вычисляемое значение — contain
  • Иначе, если вычисляемое значение user-select для родителя этого элемента — all, вычисляемое значение —
    all
  • Иначе, если вычисляемое значение user-select для родителя этого элемента — none, вычисляемое значение — none
  • Иначе, вычисляемое значение — text
text

Текст может быть выбран пользователем.

all

В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.

contain

Позволяет начать выбор внутри элемента; однако, выбор будет содержаться внутри границ данного элемента.

element Non-standard (IE-specific alias)

Аналогичен contain. Поддерживается только в Internet Explorer.

Примечание: CSS UI 4 renames user-select: element to contain.

Формальный синтаксис

user-select = 
auto | (en-US)
text | (en-US)
none | (en-US)
contain | (en-US)
all

HTML

<p>You should be able to select this text.</p>
<p>Hey, you can't select this text!</p>
<p>Clicking once will select all of this text.</p>

CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
. all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

Результат

Specification
CSS Basic User Interface Module Level 4
# content-selection

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • ::selection
  • Объект JavaScript Selection.
  • user-select in CSS Basic User Interface Module Level 4.

Last modified: , by MDN contributors

touch-action — CSS | MDN

Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).

/* Keyword values */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;
/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;

По умолчанию, жесты панорамирование, прокрутка и сужающий обрабатываются исключительно браузером.

Приложение, использующие Pointer events получит событие pointercancel (en-US), когда браузер начнёт обрабатывать тач жест. Явно указывая жесты обрабатываемые браузером, приложение может иметь своё поведение для оставшихся жестов благодаря прослушиванию событий pointermove (en-US) и pointerup (en-US). Приложения, использующие Touch events, отключают обработку жестов браузером вызовом preventDefault(), но также следует использовать touch-action, чтобы убедиться, что веб-обозреватель знает о намерениях приложения до того, как «проснутся» обработчики событий.

When a gesture is started, the browser intersects the touch-action values of the touched element and all its ancestors up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice,

touch-action is typically applied only to individual elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element’s descendants. After a gesture has started, changes to touch-action values will not have any impact on the behavior of the current gesture.

The touch-action property may be specified as either:

  • any one of the keywords auto, none, manipulation, or
  • one of the keywords pan-x, pan-left, pan-right, and/or one of the keywords pan-y, pan-up, pan-down, plus optionally the keyword pinch-zoom.

Значения

auto

Enable browser handling of all panning and zooming gestures.

none

Disable browser handling of all panning and zooming gestures.

pan-x

Enable single-finger horizontal panning gestures. May be combined with pan-y, pan-up, pan-down and/or pinch-zoom.

pan-y

Enable single-finger vertical panning gestures. May be combined with pan-x, pan-left, pan-right and/or pinch-zoom.

manipulation

Enable panning and pinch zoom gestures, but disable additional non-standard gestures such as double-tap to zoom. Disabling double-tap to zoom removes the need for browsers to delay the generation of

click events when the user taps the screen. This is an alias for «pan-x pan-y pinch-zoom» (which, for compatibility, is itself still valid).

pan-left, pan-right,pan-up,pan-down Экспериментальная возможность

Enable single-finger gestures that begin by scrolling in the given direction(s). Once scrolling has started, the direction may still be reversed. Note that scrolling «up» (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. Multiple directions may be combined except when there is a simpler representation (for example,

«pan-left pan-right» is invalid since «pan-x» is simpler, but «pan-left pan-down**» is valid).

pinch-zoom

Enable multi-finger panning and zooming of the page. This may be combined with any of the pan- values.

Formal syntax

touch-action = 
auto | (en-US)
none | (en-US)
[ (en-US) [ (en-US) pan-x | (en-US) pan-left | (en-US) pan-right ] (en-US) || (en-US) [ (en-US) pan-y | (en-US) pan-up | (en-US) pan-down ]
(en-US) || (en-US) pinch-zoom ] (en-US) | (en-US)
manipulation

The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.

#map {
  touch-action: none;
}

Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn’t want to interfere with vertical scrolling or zooming of the document.

.image-carousel {
  width: 100%;
  height: 150px;
  touch-action: pan-y pinch-zoom;
}

touch-action is also often used to completely disable the delay of click events caused by support for the double-tap to zoom gesture.

html {
  touch-action: manipulation;
}
SpecificationStatusComment
Compatibility Standard
Определение ‘touch-action’ в этой спецификации.
Живой стандартAdded pinch-zoom property value.
Pointer Events – Level 2
Определение ‘touch-action’ в этой спецификации.
РекомендацияAdded pan-left, pan-right, pan-up, pan-down property values.
Pointer Events
Определение ‘touch-action’ в этой спецификации.
УстаревшаяInitial definition

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • Pointer Events
  • WebKit Blog More Responsive Tapping on iOS

Last modified: , by MDN contributors

Как разрешить ссылки на файлы CSS из других доменов?

Задай вопрос

спросил

Изменено 6 лет, 8 месяцев назад

Просмотрено 778 раз

Я создал два веб-сайта. Один, http://static.example.com/, размещает статические файлы. На другом, http://www.example.com/, размещено веб-приложение.

Когда в пределах http://www.example.com/ я ссылаюсь на изображения со статического сайта, такого как http://static.example.com/logo.png, изображение отображается правильно. Однако, когда я помещаю:

 
 

на странице, стиль из demo.css не применяется к странице.

В инструментах разработчика Chrome:

  • На вкладке Сеть я четко вижу demo.css Файл запрашивается и принимается (HTTP 200 или HTTP 304) браузером. Если открыть файл в новой вкладке, код CSS отображается правильно.

  • На вкладке Network , когда я щелкаю файл и открываю подвкладку Response , отображается: «Данный запрос не имеет доступных данных ответа».

  • На вкладке Sources есть узел static. example.com, содержащий demo.css , но когда я нажимаю demo.css , панель справа остается пустой, как если бы файл был пуст.

Существует ли какая-то политика перекрестного происхождения для файлов CSS?

Если я заменю файл стиля, например, http://cdn.sstatic.net/Sites/stackoverflow/all.css, который используется Stack Overflow, стиль будет применен к странице.

Примечания:

  • Файл CSS demo.css содержит только body{color:red;} . HTML-страница содержит тело с

    Привет, мир!

    внутри. Браузер показывает черный текст. Я бы ожидал, что вместо этого будет отображаться красный текст.

  • Я заменил фактический TLD на example.com , фактическая структура и доменные имена очень похожи.

  • Я могу воспроизвести проблему с Chromium 49 и Firefox 45.

  • css
  • кросс-доменный
  • таблица стилей

2

По-видимому, относится к типу содержимого .

Для файла CSS, который не работает:

 Content-Type:text/plain
 

Для работающего файла CSS:

 Content-Type:text/css
 

Как указано в документах MDN

Вот несколько примеров ресурсов, которые могут быть внедрены из разных источников:

  • CSS с . Из-за расслабленного правила синтаксиса CSS, кросс-происхождение CSS требует правильного Content-Type заголовок. Ограничения зависят от браузера: ИЕ, Fire Fox, Хром, Сафари (прокрутите вниз до CVE-2010-0051) и Opera.

Просмотрите заголовки Content-type и убедитесь, что они верны.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как настроить CSS и модули CSS в webpack

Первое, что вам нужно настроить в вашем проекте webpack, это CSS. CSS поэтому является фундаментальным для веб-приложения — он нужен почти всем веб-приложениям. Но настроить webpack сложно. А если вам нужны модули CSS и CSS, это может еще больше запутать. В этой статье я разберу все это для вас.

В этом посте вы узнаете следующее:

  • Как настроить базовый CSS в проекте webpack с помощью style-loader и css-loader
  • Как извлечь CSS в собственный файл style.css
  • Как настроить модули CSS с помощью webpack
  • Как настроить CSS и модули CSS

Приступим к настройке CSS. Я предполагаю, что у вас уже есть настроенный проект веб-пакета. Если вы этого не сделаете, зайдите на createapp.dev, чтобы создать свой собственный шаблон веб-пакета.

Создайте файл CSS и укажите на него ссылку

Прежде чем настраивать поддержку CSS в настройках веб-пакета, давайте сначала добавим файл CSS и воспользуемся им.

Первое, что мы собираемся сделать, это добавить файл styles. css в проекте. Поместим его в папку src .

 корпус {
  белый цвет;
  цвет фона: черный;
} 

Этот файл CSS создает черный фон и белый цвет текста. Это дает понять, работает это или нет — если это работает, вся страница будет черной!

Следующее, что нужно сделать, это импортировать его. Мы сделаем это из файла JavaScript, потому что по умолчанию webpack помещает CSS внутри пакета, что означает, что мы должны ссылаться на него из другого файла JavaScript (мы рассмотрим, как извлечь CSS в отдельный файл позже в этом руководстве). .

Поместите это в свой файл index.js :

 import "./styles.css" 

Настройте webpack css-loader и style-loader

Чтобы иметь возможность использовать CSS в вашем приложении webpack, вам нужно установить новый загрузчик. По умолчанию webpack понимает только Javascript и JSON. С помощью загрузчика вы можете перевести файл другого типа в формат, который понимает и может работать webpack.

Существует много загрузчиков веб-пакетов, и каждый загрузчик имеет определенную цель. Вам нужно два загрузчика для поддержки CSS в вашем приложении: css-loader и style-loader . Давайте посмотрим, как мы можем настроить css-loader и style-loader в webpack.

Вы установили загрузчик с ключевым словом module в файле webpack.config.js .

Вот как вы настраиваете CSS в своем модуле webpack.config.js :

: {
    правила: [
      {
        тест: /\.css$/,
        использовать: [
          'загрузчик стилей',
          'css-загрузчик'
        ]
      }
    ]
  } 

Ключевое слово test указывает веб-пакету, для каких файлов следует использовать этот загрузчик. Ключевое слово use указывает веб-пакету, какие загрузчики следует запускать для этих файлов.

Как видно из конфига, нужно использовать два загрузчика, style-loader и css-loader . Вам также необходимо установить их как зависимости NPM:

 npm install --save-dev style-loader css-loader 

Что делают css-loader и style-loader?

Загрузчики — это просто функции JavaScript: они принимают некоторые данные в качестве входных данных, делают что-то с этими данными и возвращают преобразованную версию данных. Когда вы используете два загрузчика в веб-пакете, он берет вывод первого и отправляет его в качестве ввода второму. В нашем примере он берет файл CSS и прогоняет его через css-loader , затем он берет выходные данные и запускает их в качестве входных данных для style-loader

Давайте посмотрим, что делают загрузчики.

css-loader считывает CSS из файла CSS и возвращает CSS с import и url(...) , разрешенными правильно. Что это обозначает? Давайте посмотрим на пример. Допустим, у вас есть URL в CSS, ссылающийся на другой ресурс, например изображение:

 . topbanner {
  background: url("topbanner.svg") #00d исправлено отсутствие повторов;
} 

В этом примере мы ссылаемся на topbanner.svg из CSS. Когда css-loader видит эту строку, он говорит веб-пакету загрузить этот файл с помощью соответствующего загрузчика. Чтобы это работало, вам также необходимо настроить загрузчик SVG, потому что файл является файлом SVG:

 module: {
  правила: [
    // Загрузчик CSS здесь
    {
      тест: /\.svg$/,
      использовать: "файл-загрузчик",
    },
  ]
} 

Для загрузки файлов SVG мы используем загрузчик файлов webpack.

Если бы ты не стал бы настроили css-loader вы получите загадочную ошибку, подобную этой:

 ОШИБКА в ./src/styles.css 1:0
Ошибка синтаксического анализа модуля: неожиданный токен (1:0)
Вам может понадобиться соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла. См. https://webpack. js.org/concepts#loaders.
> .topbanner {
| background: url("zip.svg") #00D - исправлено отсутствие повторов;
| }
 @ ./src/styles.css 1:14-39
 @ ./src/index.js 

Вы получите эту ошибку , хотя вы настроили загрузчик для файлов SVG. Избегайте подобных странных ошибок, всегда используя css-loader для своей конфигурации CSS.

Следующим загрузчиком, который вы настроили, был загрузчик стилей . Этот загрузчик добавляет CSS в DOM, чтобы стили были активны и видны на странице. Это необходимо, потому что CSS помещается в файл bundle.js — отдельного файла styles.css нет.

Возможен вывод отдельного styles.css с помощью плагина mini-css-extract-plugin вместо style-loader , как мы делали ранее.

Первое, что вам нужно сделать, это установить зависимость

 npm install --save-dev mini-css-extract-plugin 

Затем вам нужно импортировать плагин в верхней части webpack. config.js

 const MiniCssExtractPlugin = require("mini-css-extract-plugin") 

Далее нужно включить плагин в разделе плагинов вашего webpack.config.js файл:

 плагины: [
  новый MiniCssExtractPlugin(),
], 

И последнее, но не менее важное: вы заменяете style-loader на MiniCssExtractPlugin.loader :

 {
  тест: /\.css$/,
  использовать: [
    MiniCssExtractPlugin.loader, // вместо style-loader
    'css-загрузчик'
  ]
} 

Теперь, когда вы запускаете webpack, он выводит файл main.css в папку dist, на которую вы можете ссылаться из файла index.html . (убрать импорт "./styles.css"; строка из index.js , если вы это добавили)

Теперь, когда вы знаете, как настроить чистый CSS, давайте посмотрим, как настроить модули CSS в веб-пакете.

Но сначала что такое модули CSS? Из репозитория github:

«Модуль CSS — это файл CSS, в котором все имена классов и имена анимаций по умолчанию ограничены локально».

CSS является глобальным — определяемые вами классы можно использовать где угодно. Но модули CSS ограничены компонентом, в котором они используются.

На сайте CSS-tricks.com есть хорошее введение в модули CSS, которое будет полезно, если вы хотите узнать больше. В этом посте мы сосредоточимся на том, как его настроить.

Настройка модулей CSS очень похожа на настройку CSS.

 {
  тест: /\.css$/,
  использовать: [
    'загрузчик стилей',
    {
      загрузчик: 'css-загрузчик',
      параметры: {
        импортЗагрузчики: 1,
        модули: правда
      }
    }
  ]
} 

вы все еще используете загрузчик css и загрузчик стилей . Никаких дополнительных зависимостей не требуется. Но разница в настройке CSS заключается в том, что вы добавляете две опции в css-loader .

Это модули : true , который сообщает css-loader включить модули CSS.

importLoaders: 1 означает, что он также применяет модули CSS к ресурсам @import ed.

Одновременное использование как модулей CSS, так и глобального CSS

Таким образом, чтобы включить модули CSS, нужно передать некоторые параметры в css-загрузчик . Но что, если мы хотим использовать CSS-модули CSS и . Допустим, у вас есть файл layout.css , который является действительно глобальным CSS. Или вы используете сторонний компонент, зависящий от глобального CSS. Это возможно сделать!

Нам нужно соглашение, чтобы решить, какие файлы являются глобальными CSS, а какие — модулями CSS. Мне нравится использовать модули CSS только для файлов, оканчивающихся на *.module.css , например modal.module.css и все остальные файлы *.css являются глобальными.

Чтобы настроить это, мы добавим два загрузчика в нашу конфигурацию веб-пакета: один для CSS и один для модулей CSS, и мы будем использовать ключевые слова include и exclude для разделения двух.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *