Allow css: user-select — CSS | MDN

• Pointer Events
• WebKit Blog More Responsive Tapping on iOS

Last modified: 30 нояб. 2022 г., by MDN contributors

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

Задай вопрос

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

Изменено 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 для разделения двух.