как ограничить влияние стилей без спецефичности?

Question

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

Как можно этого добиться без iframe ?

Answer 1

нашел решение

парсим стили, через php (в моем случае, библиотека Sabberworm\CSS), и в полученном объекте, у каждого селектора добавляем некий сгенерированный идентификатор (как префикс), который будем прописывать у блока с контентом новости.

пример кода

$randomId = "#randomId4Block"; # добавляем как префикс для каждого селектора и задаем как id для блока div
$oCss = (new Sabberworm\CSS\Parser(file_get_contents('style.css')))->parse();

foreach($oCss->getAllDeclarationBlocks() as $oBlock) {
    foreach($oBlock->getSelectors() as $oSelector) {
        $oSelector->setSelector($randomId .' '.$oSelector->getSelector());
    }
}

Answer 2

Или так

function getElemWithClass(tag, ...className) {
  const node = document.createElement(tag);
  className.forEach((_className) => {
    node.classList.add(_className);
  });
  return node;
}

function createStyle(content) {
  let style = content.querySelector('.my__style');
  if (style === null) {
    style = getElemWithClass('style', 'my__style');
    content.prepend(style);
  }
  return style;
}

const content = document.querySelector('.content');
const input = document.querySelector('.input');

input.addEventListener('input', (e) => {
  const value = e.target.value;
  const style = createStyle(content);
  style.innerText = '.content ' + value;
});

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.block {
  width: 100%;
  min-height: 80vh;
  background-color: black;
  color: white;
  font-size: 30px;
}

.input {
  border: 1px solid black;
  max-width: 200px;
  margin-bottom: 10px;
  font-size: 20px;
}

<input type="text" class="input">

<div class="content">
  <div class="block">
    1
  </div>
</div>

БЛОГ НА HUSL

как ограничить влияние стилей без спецефичности?

Ответы (2 шт):