Крестик на css: html — Создание крестика в CSS — Вебджем.рф

Содержание

html — Расположить иконку закрытия над картинкой

Задать вопрос

Вопрос задан 4 года 11 месяцев назад

Изменён 4 года 11 месяцев назад

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

Использую Bootstrap 4, в верстке не сильно шарю. Как расположить кнопку закрытия (та, что внутри .close-image-icon) в правом верхнем углу картинки, то есть по сути над ней?

<div>
  <span>
  <button type="button" aria-label="Close">
   <span aria-hidden="true">&times;</span>
  </button>
  </span>
  <img :src="src" />
  <input type="text" placeholder="Описание" v-model="description" @change="sendDescription" />
</div>

И попутно еще один вопрос: в обычном состоянии этот «крестик» должен быть спрятан, но при наведении мыши на картинку его надо активировать.

Как это реализоваться среедствамии CSS? Не хочу для этого JS использовать. Спасибо

html
css
bootstrap

Чтобы указать абсолютное позиционирование крестика надо указать родительскому блоку стиль position: relative, чтобы не выходить за его рамки.

.container>div {
  position: relative;
  /* Чтобы .close не выходил за рамки .container */
}

.close {
  position: absolute;
  right: 0;
  /* Ставим крестик справа */
}

.close-image-icon {
  display: none;
  /* Скрываем крестик по умолчанию */
}

.container>div:hover .close-image-icon {
  display: block !important;
  /* При навидении на div в .container показать крестик */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div>
  <div>
    <span>
      <button type="button" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    </span>
    <img src="https://dummyimage.
  com/600x400/fcc/000 ">
    <input type="text" placeholder="Описание ">
  </div>
</div>

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Настройки виджета регистрации

Общий список возможных настроек виджета регистрации:

debug?: boolean;            // Вывод отладочной информации в консоль браузера
display: string;            // Как отображать виджет.
  "iframe" — в виде формы
                            // на странице. "popup" — в попапе поверх страницы.
initialRoute?: string;      // Экран, с которого начинается отображение
                            // виджета. Как правило "main" (по умолчанию)
                            // или "button".
hidePreloading?: boolean;   // Не показывать индикатор загрузки.
hidePromocodeInput?: string  // Как отображать поле для ввода промокода на 
                             // странице регистрации, подробнее см. 
                             // в разделе "Расширенная кастомизация"
iframe: {
    width?: any;            // Ширина виджета
    height?: any;           // Высота виджета
    autoHeight?: boolean;   // Режим автоподбора высоты
    name?: string;          // Параметр name тега iframe
    src?: string;           // Параметр src тега iframe
    target?: JQuery;
    fill?: boolean;
    background?: string;    // Параметр background тега iframe
    useVkResize?: boolean;  // Использовать ли API Вконтакте
                            // для изменения размера виджета
};
popup: {
    margins?: number[];
    width?: number;
    tint?: boolean;         // Затенять ли остальную страницу
                            // (по умолчанию — true)
    padding?: number;
    addCss?: Object;        // Дополнительные стили в виде пар
                            // свойство—значение.  
    triggerSelector?: string;   // Селектор внешней ссылки или кнопки,
                                // по клику на которые открывается попап
                                // должен искаться jQuery. Подойдет
                                // что-то типа ".aButton" или "#theLink"
    autoShrink?: bool;      // Ужимать ли виджет на маленьких экранах
    minViewport?: number;   // Минимальная ширина, до которой ужимается
                            // виджет на маленьких экранах
    noClose?: boolean;      // Показывать ли крестик для закрытия
                            // попапа (по умолчанию — true)
    outerClose?: boolean;   // Выносить ли крестик за край виджета
                            // (false)
    closeColor?: string;    // Цвет крестика ("black")
    closeCss?: Object;      // Дополнительные стили крестика.
                            // (список пар свойство — значение)
    closeConfirm?: {
        texts?: {
            title?: string;  // Заголовок диалога о закрытии попапа
            description?: string; // Текст диалога о закрытии попапа
            close?: string;  // Текст кнопки отмены закрытия попапа
            proceed?: string;// Текст кнопки подтверждения закрытия 
                             // попапа
        }
    }
};
addFormData: any;           // Годится для передачи рефкодов и т.
  д.
event?: EventModel;         // Модель данных события
utmForward: boolean;        // Транслировать ли UTM метки со страницы
forwardCookies?: boolean;   // Транслировать ли значения cookies в виджет
buttonSettings: {           // Настройки виджета в режиме кнопки
    css: Object;            // Дополнительные CSS стили
    text: string;           // Текст на кнопке
    height: number;         // Высота кнопки в пикселях
};
mainFormButtonSettings: {   // Настройки кнопки покупки билета
                            // в самом виджете
    staticText?: string;
    texts: {
        proceed: string;    // "Продолжить"
        buy: string;        // "Купить"
        items: string[];    // ["билет", "билеты"]
        register: string;   // "Зарегистрироваться"
        atleast: string;    // "Выберите хотя бы один билет"
    };
};
multiankSettings?: {
    addFirstAttendee: boolean;
    distinguishFirstAttendee: boolean;
    initialSelects: boolean;
};
hideFormsWhenNoTickets?: boolean; // Скрывать форму регистрации,
                                  // если билеты пока не выбраны
prefill?: PrefillModels;    // Предзаполнение формы
recurringDatesMode: string; // ("auto"|"squish"|"expand")
                            // Показывать ли заголовки дней отдельно
                            // или схлопывать всё в обычные строчки дата-время.  
  // (Имеет смысл для мастер-событий.)
bindEvents?: any;   // Повесить обработчики на события.
                    // См. раздел «Встроить свое поведение в виджет»
overrideTemplates?: any;    // Переопределить шаблоны
                            // См. «Сверстать по своему макету»
noScrollToWidgetOnViewChange?: boolean; // не скроллить страницу до верха
                                        // виджета при смене его состояния
                                        // (напр., переход от анкеты
                                        //  к оплате)
loadCSS?: string[];         // Загрузка дополнительных стилей.
                            // См. «Перекрасить с помощью CSS»
skipBaseCSS?: boolean;      // Не загружать базовые стили виджета
disableBootstrap?: boolean; // Не загружать стили библиотеки Bootstrap
locale?: string;        // Язык виджета. Доступны значения "ru" или "en".
                        // Про дополнительные значения — см. раздел
                        // «Изменить тексты и локализовать».

Настройки скопированы из исходников на TypeScript, но вы можете подглядывать сюда, даже если используете чистый JavaSript. Или CoffeeScript. Или еще что-нибудь.

Введение в кросс-браузерное тестирование — Изучите веб-разработку

Обзор: кросс-браузерное тестирование
Следующий

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

Предпосылки:	Знание ядра HTML, CSS и Языки JavaScript.
Цель:	Чтобы получить представление о концепциях высокого уровня, связанных с кросс- тестирование браузера.

Кроссбраузерное тестирование — это проверка того, что веб-сайт работает в различных браузерах и на различных устройствах. Веб-разработчики должны учитывать:

Различные браузеры, в том числе немного более старые, которые не поддерживают все последние функции JS/CSS.
Различные устройства, от настольных компьютеров и ноутбуков до планшетов и смартфонов и смарт-телевизоров, с различными аппаратными возможностями.
Люди с ограниченными возможностями, которые могут полагаться на вспомогательные технологии, такие как программы чтения с экрана, или использовать только клавиатуру.

Помните, что вы не являетесь вашими пользователями — то, что ваш сайт работает на вашем MacBook Pro или топовом Galaxy Nexus, не означает, что он будет работать для всех ваших пользователей!

Примечание: Заставьте Интернет работать для всех обсуждает различные браузеры, их долю на рынке и связанные с ними вопросы совместимости между браузерами.

Веб-сайты должны быть доступны через различные браузеры и устройства, а также для людей с ограниченными возможностями (например, для чтения с экрана). Сайту не обязательно обеспечивать одинаковую работу во всех браузерах и на всех устройствах, если основные функции каким-то образом доступны. Например, в современном браузере может быть что-то анимированное, трехмерное и блестящее, в то время как старые браузеры могут просто отображать плоскую графику с той же информацией.

Кроме того, практически невозможно, чтобы веб-сайт работал во ВСЕХ браузерах и устройствах, поэтому веб-разработчик должен прийти к соглашению с владельцем сайта о диапазоне браузеров и устройств, на которых код будет работать.

Существует много разных причин, по которым возникают проблемы с разными браузерами, и обратите внимание, что здесь мы говорим о проблемах, из-за которых вещи ведут себя по-разному в разных браузерах / устройствах / предпочтениях просмотра. Еще до того, как вы приступите к кросс-браузерным проблемам, вы уже должны были исправить ошибки в своем коде (см. Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript из предыдущих разделов, чтобы при необходимости освежить память).

Кроссбраузерные проблемы обычно возникают из-за того, что:

иногда браузеры имеют ошибки или по-разному реализуют функции. Эта ситуация намного менее плоха, чем раньше; когда IE4 и Netscape 4 конкурировали за звание доминирующего браузера в 1990-х годах, браузерные компании сознательно реализовывали разные вещи, пытаясь получить конкурентное преимущество, что превращало жизнь разработчиков в ад. В наши дни браузеры намного лучше следуют стандартам, но иногда все еще проскальзывают различия и ошибки.
некоторые браузеры могут иметь разные уровни поддержки технологических функций, чем другие. Это неизбежно, когда вы имеете дело с передовыми функциями, которые браузеры только начинают реализовывать, или если вам нужно поддерживать очень старые браузеры, которые больше не разрабатываются, которые, возможно, были заморожены (т. ) задолго до того, как была изобретена новая функция. Например, если вы хотите использовать передовые функции JavaScript на своем сайте, они могут не работать в старых браузерах. Если вам нужно поддерживать старые браузеры, вам, возможно, придется не использовать их или преобразовать свой код в старомодный синтаксис, используя какой-либо кросс-компилятор, где это необходимо.
некоторые устройства могут иметь ограничения, из-за которых веб-сайт работает медленно или плохо отображается. Например, если сайт был спроектирован так, чтобы хорошо выглядеть на настольном ПК, он, вероятно, будет выглядеть крошечным и его будет трудно читать на мобильном устройстве. Если ваш сайт включает в себя множество больших анимаций, это может быть нормально на планшете с высокими характеристиками, но может быть вялым или прерывистым на бюджетном устройстве.

…и другие причины.

В следующих статьях мы рассмотрим распространенные кроссбраузерные проблемы и рассмотрим их решения.

Вся эта работа по кросс-браузерному тестированию может показаться трудоемкой и пугающей, но это не обязательно — вам просто нужно тщательно спланировать ее и убедиться, что вы проводите достаточное количество тестов в нужных местах, чтобы убедиться, не столкнуться с неожиданными проблемами. Если вы работаете над большим проектом, вы должны регулярно его тестировать, чтобы убедиться, что новые функции работают для вашей целевой аудитории и что новые дополнения к коду не нарушают работу старых функций.

Если вы оставите все тестирование на конец проекта, любые обнаруженные вами ошибки будут намного более дорогими и трудоемкими, чем если бы вы обнаруживали их и исправляли по мере продвижения.

Рабочий процесс тестирования и исправления ошибок в проекте можно разбить примерно на следующие четыре этапа (это очень грубо — разные люди могут делать что-то совсем по-другому):

Начальное планирование > Разработка > Тестирование/обнаружение > Исправления/итерация

Шаги 2–4 повторяются столько раз, сколько необходимо для выполнения всей реализации. Мы рассмотрим различные части процесса тестирования более подробно в последующих статьях, а пока давайте просто подытожим, что может произойти на каждом этапе.

Первоначальное планирование

На начальном этапе планирования у вас, вероятно, будет несколько совещаний по планированию с владельцем/клиентом сайта (это может быть ваш начальник или кто-то из сторонней компании, для которой вы создаете веб-сайт), на которых вы точно определить, каким должен быть веб-сайт — какое содержание и функциональность он должен иметь, как он должен выглядеть и т. д. На этом этапе вам также нужно знать, сколько времени у вас есть на разработку сайта — каковы их сроки, и сколько они собираются платить вам за вашу работу? Мы не будем вдаваться в подробности, но кроссбраузерность может серьезно повлиять на такое планирование.

Как только вы получите представление о необходимом наборе функций и технологиях, с помощью которых вы, вероятно, будете создавать эти функции, вы должны начать изучать целевую аудиторию — какие браузеры, устройства и т. д. будет использовать целевая аудитория для этого сайта. ? У клиента могут уже быть данные об этом из предыдущих исследований, которые они провели, например. с других веб-сайтов, которыми они владеют, или с предыдущих версий веб-сайта, над которым вы сейчас работаете. Если нет, вы сможете получить хорошее представление, просмотрев другие источники, такие как статистика использования для конкурентов или страны, которые будет обслуживать сайт. Вы также можете использовать немного интуиции.

Например, вы создаете сайт электронной коммерции, обслуживающий клиентов в Северной Америке. Сайт должен полностью работать в нескольких последних версиях самых популярных настольных и мобильных (iOS, Android, Windows phone) браузеров, включая Chrome (и Opera, поскольку он основан на том же движке рендеринга, что и Chrome), Firefox, IE. /Эдж и Сафари. Он также должен обеспечивать приемлемое взаимодействие с IE 8 и 9 и быть доступным в соответствии с WCAG AA.

Теперь, когда вы знаете свои целевые платформы для тестирования, вам следует вернуться назад и просмотреть требуемый набор функций и технологии, которые вы собираетесь использовать. Например, если владелец сайта электронной коммерции хочет, чтобы 3D-тур с поддержкой WebGL был встроен в страницы продуктов, ему нужно будет признать, что это просто не будет работать в версиях IE до 11. Вам придется согласиться. предоставить версию сайта без этой функции пользователям более старых версий IE.

Вам следует составить список потенциальных проблемных мест.

Примечание: Вы можете найти информацию о поддержке браузером технологий, просматривая различные функции на MDN — сайте, на котором вы находитесь! Вам также следует посетить сайт caniuse.com для получения дополнительной полезной информации.

После согласования этих деталей можно приступать к разработке сайта.

Разработка

Теперь о разработке сайта. Вы должны разделить различные части разработки на модули, например, вы можете разделить различные области сайта — домашняя страница, страница продукта, корзина, рабочий процесс оплаты и т. д. Затем вы можете дополнительно разделить их — внедрить общий верхний и нижний колонтитулы сайта. , внедрить просмотр сведений о странице продукта, внедрить постоянный виджет корзины покупок и т. д.

Существует несколько общих стратегий кросс-браузерной разработки, например:

Максимально точно работайте со всеми функциями во всех целевых браузерах. Это может включать в себя написание различных путей кода, которые по-разному воспроизводят функциональные возможности, предназначенные для разных браузеров, или использование Polyfill для имитации любой отсутствующей поддержки с использованием JavaScript или других технологий, или использование библиотеки, которая позволяет вам написать один бит кода, а затем разные вещи в фоновом режиме в зависимости от того, что поддерживает браузер.
Примите тот факт, что некоторые вещи не будут работать одинаково во всех браузерах, и предоставьте разные (приемлемые) решения в браузерах, которые не поддерживают полную функциональность. Иногда это неизбежно из-за ограничений устройства — широкоэкранный кинотеатр не даст такого же визуального восприятия, как 4-дюймовый мобильный экран, независимо от того, как вы программируете свой сайт.
Примите тот факт, что ваш сайт просто не будет работать в некоторых старых браузерах, и двигайтесь дальше. Это нормально, если ваш клиент/пользовательская база согласны с этим.

Обычно ваша разработка будет включать комбинацию трех вышеуказанных подходов. Самое главное, что вы тестируете каждую маленькую часть перед коммитом — не оставляйте все тестирование на конец!

Тестирование/обнаружение

После каждого этапа внедрения вам потребуется протестировать новую функциональность. Для начала убедитесь, что в вашем коде нет общих проблем, которые мешают вашей функции работать:

Протестируйте ее в нескольких стабильных браузерах в вашей системе, таких как Firefox, Safari, Chrome или IE/Edge. .
Проведите некоторые тесты на доступность lo-fi, например, попытайтесь использовать свой сайт только с клавиатуры или используйте свой сайт через программу чтения с экрана, чтобы проверить, доступна ли навигация по нему.
Протестируйте на мобильной платформе, такой как Android или iOS.

На этом этапе исправьте все проблемы, обнаруженные в новом коде.

Затем вам следует попробовать расширить список тестовых браузеров до полного списка браузеров целевой аудитории и начать концентрироваться на отсеивании кроссбраузерных проблем (дополнительную информацию об определении целевых браузеров см. в следующей статье). Например:

Попробуйте протестировать последние изменения во всех доступных современных настольных браузерах, включая Firefox, Chrome, Opera, IE, Edge и Safari для настольных компьютеров (в идеале — Mac, Windows и Linux).
Протестируйте его в распространенных браузерах телефонов и планшетов (например, iOS Safari на iPhone/iPad, Chrome и Firefox на iPhone/iPad/Android),
Также выполните тесты в любых других браузерах, которые вы включили в свой целевой список.

Самый лоу-файный вариант — просто провести все возможные тесты самостоятельно (привлекая на помощь товарищей по команде, если вы работаете в команде). Вы должны попытаться протестировать его на реальных физических устройствах, где это возможно.

Если у вас нет средств для тестирования всех этих различных комбинаций браузеров, операционных систем и устройств на физическом оборудовании, вы также можете использовать эмуляторы (эмулировать устройство с помощью программного обеспечения на вашем настольном компьютере) и виртуальные машины (программное обеспечение). который позволяет вам эмулировать несколько комбинаций операционной системы и программного обеспечения на вашем настольном компьютере). Это очень популярный выбор, особенно в некоторых случаях — например, Windows не позволяет вам одновременно устанавливать несколько версий Windows на одном компьютере, поэтому использование нескольких виртуальных машин часто является единственным вариантом.

Другой вариант — группы пользователей — использование группы людей, не входящих в вашу команду разработчиков, для тестирования вашего сайта. Это может быть группа друзей или родственников, группа других сотрудников, класс в местном университете или организация профессионального пользовательского тестирования, где людям платят за тестирование вашего сайта и предоставление результатов.

Наконец, вы можете повысить эффективность тестирования, используя инструменты аудита или автоматизации; это разумный выбор по мере того, как ваши проекты становятся больше, поскольку выполнение всего этого тестирования вручную может занять очень много времени. Вы можете настроить собственную систему автоматизации тестирования (популярным приложением является Selenium), которая может, например, загружать ваш сайт в различных браузерах, а также:

посмотреть, вызывает ли нажатие кнопки что-то успешное (например, отображение карты), отображение результатов после завершения тестов
сделайте снимок экрана каждого, что позволит вам увидеть, соответствует ли макет в разных браузерах.

Если вы хотите вложить деньги в тестирование, существуют также коммерческие инструменты, которые могут автоматизировать большую часть настройки и тестирования (например, Sauce Labs и Browser Stack). Эти виды инструментов обычно обеспечивают непрерывный рабочий процесс интеграции, в котором изменения кода автоматически проверяются, прежде чем их разрешат отправить в ваш репозиторий кода.

Тестирование на предварительных версиях браузеров

Часто бывает полезно протестировать на предварительных версиях браузеров; см. следующие ссылки:

Firefox Developer Edition
Программа предварительной оценки Microsoft Edge
Обзор технологии Safari
Хром Канарейка
Разработчик Opera

Это особенно распространено, если вы используете очень новые технологии на своем сайте и хотите протестировать последние реализации, или если вы столкнулись с ошибкой в последней версии браузера и хотите проверить, не разработчики браузера исправили ошибку в новой версии.

Исправления/итерации

После того, как вы обнаружили ошибку, вам нужно попытаться ее исправить.

Первое, что нужно сделать, это максимально точно определить, где возникает ошибка. Получите как можно больше информации от человека, сообщившего об ошибке — какая платформа (платформы), устройство (устройства), версия (версии) браузера и т. д. Попробуйте на аналогичных конфигурациях (например, одну и ту же версию браузера на разных настольных платформах или несколько разных версий одного и того же браузера на одной и той же платформе), чтобы увидеть, насколько распространена ошибка.

Возможно, это не ваша вина — если в браузере есть ошибка, мы надеемся, что поставщик быстро ее исправит. Возможно, она уже исправлена — например, если ошибка присутствует в выпуске Firefox 49, но ее больше нет в Firefox Nightly (версия 52), значит, они исправили ее. Если это не исправлено, вы можете сообщить об ошибке (см. Сообщения об ошибках ниже).

Если это ваша вина, вам нужно это исправить! Для выяснения причины ошибки используется та же стратегия, что и для любой ошибки веб-разработки (опять же, см. Отладка HTML, Отладка CSS и Что пошло не так? Устранение неполадок JavaScript). Как только вы обнаружите, что вызывает вашу ошибку, вам нужно решить, как обойти ее в конкретном браузере, в котором она вызывает проблемы — вы не можете просто изменить код проблемы напрямую, так как это может нарушить код в других браузерах. . Общий подход обычно состоит в том, чтобы каким-то образом разветвить код, например, использовать код обнаружения функций JavaScript для обнаружения ситуаций, в которых проблемная функция не работает, и запускать какой-то другой код в тех случаях, когда это работает.

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

Повторим сказанное выше: если вы обнаружите ошибки в браузерах, вы должны сообщить о них:

Firefox Bugzilla
Средство отслеживания проблем EdgeHTML
Сафари
Хром
Опера

Эта статья должна была дать вам общее представление о наиболее важных понятиях, которые вам необходимо знать о кросс-браузерном тестировании. Вооружившись этими знаниями, вы теперь готовы двигаться дальше и начать изучать стратегии кросс-браузерного тестирования.

Обзор: кроссбраузерное тестирование
Следующий

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 24 февраля 2023 г. участниками MDN.

Поиск недействительных, переопределенных, неактивных и других CSS

В этом руководстве предполагается, что вы знакомы с проверкой CSS в Chrome DevTools. См. Просмотр и изменение CSS, чтобы узнать об основах.

# Проверьте созданный вами CSS

Предположим, вы добавили CSS к элементу и хотите убедиться, что новые стили применяются правильно. Когда вы обновляете страницу, элемент выглядит так же, как и раньше. Что-то не так.

Первое, что нужно сделать, это проверить элемент и убедиться, что ваш новый CSS действительно применяется к элементу.

Иногда вы увидите новый CSS на панели Элементы > Стили , но ваш новый CSS отображается бледным текстом, нередактируемым, перечеркнутым или рядом с ним отображается значок предупреждения или подсказки.

# Понимание CSS на панели «Стили»

Панель « Стили» распознает многие виды проблем CSS и выделяет их по-разному.

# Invalid

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

# Переопределено

Панель Стили вычеркивает свойства, которые переопределяются другими свойствами в соответствии с каскадным порядком.

В этом примере ширина : 300px; Атрибут стиля в элементе переопределяет ширину : 100% в классе .youtube .

# Неактивно

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

Эти бледные свойства неактивны из-за логики CSS, а не из-за каскадного порядка.

Неактивные свойства бледных отличаются от ненаследственных свойств бледных. Неактивные свойства имеют значки.
Наведите указатель мыши на значок, чтобы получить подсказку о том, что пошло не так.

В этом примере дисплей : блок; Свойство отключает justify-content и align-items , которые управляют гибкими или сетчатыми макетами.

# Унаследованные и неунаследованные

На панели Стили перечислены свойства в разделах Унаследовано от в зависимости от их наследования по умолчанию:

Унаследовано по умолчанию в виде обычного текста.
Неунаследованные по умолчанию выделены бледным текстом.

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

# Сокращение

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

На панели Стили отображаются сокращенные свойства в виде раскрывающихся списков, содержащих все сокращенные свойства.

В этом примере фактически переопределены два из четырех укороченных свойств.

# Недоступно для редактирования

На панели Стили отображаются свойства, которые нельзя редактировать курсивом . Например, невозможно изменить CSS из следующих источников:

таблица стилей пользовательского агента — таблица стилей Chrome по умолчанию.
Связанные со стилем HTML-атрибуты элемента, например высота, ширина, цвет и т. д. Вы можете редактировать их в дереве DOM, и это обновляет CSS в Панель стилей , а не наоборот.
В этом примере для атрибута height="48" элемента установлено значение 50 . Это обновляет соответствующее свойство в разделе svg[Attributes Style] на панели Стили .

# Проверьте элемент, который по-прежнему не оформлен так, как вы думаете

Чтобы понять, что пошло не так, откройте панель Computed , чтобы увидеть «окончательный» CSS, примененный к элементу, и сравните с ним вы заявили.

Панель Элементы > Стили отображает точный набор правил CSS, записанных в различных таблицах стилей. С другой стороны, на панели Elements > Computed перечислены разрешенные значения CSS, которые Chrome использует для рендеринга элемента:

CSS, полученный из наследования
Победители каскада
Полнотекстовые свойства (точные), а не сокращенные (краткие)
Вычисленные значения, например, размер шрифта: 14px вместо font-size: 70%

# Понимание CSS на панели вычислений

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

# Объявлено и унаследовано

На панели Вычислено перечислены свойства, объявленные в любой таблице стилей, написанные обычным шрифтом, как собственные, так и унаследованные. Щелкните значок расширения рядом с ними, чтобы увидеть их источник.

Чтобы просмотреть объявление на панели Стили , наведите указатель мыши на развернутое свойство и нажмите кнопку со стрелкой.

Чтобы просмотреть объявление на панели Источники , щелкните ссылку на исходный файл.

Для свойств с несколькими источниками на панели Вычислено сначала отображается победитель каскада.

# Runtime

На панели Computed бледным текстом перечислены значения свойств, рассчитанные во время выполнения.

В этом примере Chrome вычислил для элемента

Ширина относительно его родителя,
Высота относительно своих дочерних элементов, двух
элементов

# Неунаследованные и пользовательские

Чтобы Вычисленные 50039

панели отображали все их свойства и 9014 все их свойства и 9014 панели 9014 , отметьте Показать все .

Крестик на css: html — Создание крестика в CSS

html — Расположить иконку закрытия над картинкой

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

Отправить без регистрации

Отправить без регистрации

Настройки виджета регистрации

Введение в кросс-браузерное тестирование — Изучите веб-разработку

Первоначальное планирование

Разработка

Тестирование/обнаружение

Тестирование на предварительных версиях браузеров

Исправления/итерации

Обнаружили проблему с содержанием этой страницы?

Поиск недействительных, переопределенных, неактивных и других CSS

# Проверьте созданный вами CSS

# Понимание CSS на панели «Стили»

# Invalid

# Переопределено

# Неактивно

# Унаследованные и неунаследованные

# Сокращение

# Недоступно для редактирования

# Проверьте элемент, который по-прежнему не оформлен так, как вы думаете

# Понимание CSS на панели вычислений

# Объявлено и унаследовано

# Runtime

# Неунаследованные и пользовательские

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

Рубрики