Я нахожусь в процессе обновления существующего приложения с Ext 3.x до 4, и мне удалось включить опцию CSS для сброса области действия Ext, чтобы запретить Ext применять сброс CSS ко всему моему приложению, однако я сейчас сталкиваюсь с другой проблемой. Мое приложение использует множество жестко запрограммированных неэкстрантных сгенерированных стилей HTML и CSS, большая часть которых содержится в компонентах Ext (панелях, панелях табуляции и т. Д.). Очевидно, что поскольку этот html является потомком элементов, содержащих компоненты ext, он наследует CSS сброс стилей. И, как результат, полностью поднять пользовательский стиль не-Ext HTML.
В частности, есть два правила CSS, которые вызывают проблемы:
.x-border-box .x-reset, .x-border-box .x-reset * {box-sizing: border-box;-moz-box sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;}[/php]
Это свойство не было большой проблемой, все, что мне нужно было сделать, это создать свой собственный класс обертки сброса, который изменил размер блока обратно на «content-box» и применить этот класс к самому верхнему элементу обертки в моем пользовательском HTML , Это правило следующее:
.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;}
Однако другое правило CSS - это то, что не так просто отрицать:
.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {margin: 0;padding: 0;}
Причина, по которой это правило так хлопотно, заключается в том, что все различные элементы в моем пользовательском HTML не будут иметь одинаковые поля и отступы, поэтому я не могу просто переопределить эти стили так же, как я сделал для box- проклейки. И причина того, что это правило имеет приоритет над подавляющим большинством моих пользовательских стилей CSS, заключается в том, что оно имеет более высокую специфичность, чем сам класс CSS. То есть Стили полей / отступов селектора ".x-reset div" переопределяют стиль правила, например ".my-cool-class {padding: 5px; margin: 5px;}" для ''.
Чтобы преодолеть это, естественно, я мог бы обновить свой пользовательский css, чтобы придать правилам более высокую специфичность, либо с помощью префикса селекторов класса с типом элемента, на который он нацелен («div.my-cool-class»), либо с префиксом правил с помощью .x-reset («.x-reset .my-cool-class»), однако любой из этих параметров потребует много ручного обновления большого количества пользовательских CSS, которые уже существуют, не говоря уже о добавлении в размер файла и ограничении модульность классов CSS.
Так есть ли какой-нибудь способ через настройки Ext, или, возможно, через какое-то другое CSS-решение, которое я просто упускаю из виду, которое может решить эту проблему элегантно и, надеюсь, с не слишком большими накладными расходами?