Главная

Создаем самогенерирующийся CSS

2012-09-18 в 10:02, admin, рубрики: css, javascript, генерация, метки: css, javascript, генерация

Сегодня я расскажу о том, как можно быстро и легко сделать стили, которые генерируются сами по себе. Итак начнем.

Для того, чтобы создать само генерируемый стиль, нам потребуется написать класс. Назовем его GSS (Generated Style Sheet).

  var GSS = function(genFunc){
    this.setGenFunc(genFunc);
    this.style = document.createElement("style");
    document.head.appendChild(this.style);
    this.style.type = "text/css";
    this.style.innerText = this.generate();
  }

  GSS.prototype = {
    setGenFunc: function(callback){
      this._genFunc = callback;
    },
    generate: function(){
      this.style.innerText = this._genFunc ? this._genFunc() : "";
    }
  }

Использование

Вот пример использования на JavaScript. Элементу с id hover мы присваиваем класс hover. При наведении мыши на этот элемент, мы меняет цвет фона при наведении. Если мы убираем мышь, то по правилу CSS должен вернуться в прежнее положение. При новом наведении должен сменить на новый цвет. Получается интересный эффект при наведении мыши. Мы можем при убирание мыши реализовать аналогичный эффект, но уже с НЕ :hover классу.

var object = {
  color: "rgb(0,0,0)"
};

var gss = new GSS(function(){
    var css = [
      ".hover:hover {",
      "  background-color: " + object.color + ";",
      "}"
    ].join("n");
    return css;
});

document.addEventListener("DOMContentLoaded",function(){
    var hoverBox = document.getElementById("hover");
    hoverBox.classList.add("hover");
    hoverBox.addEventListener("mouseover", function(){
        object.color = "rgb("+Math.round(Math.random*255)+","+Math.round(Math.random*255)+","+Math.round(Math.random*255)+")";
        gss.generate();
    });
});

Достоинства

Этим способом можно создавать псевдо-элементы, интерактивные элементы с использованием JavaScript. Получается своего рода смесь JS и CSS.

Недостатки

Работает только если загружен тег head. Требуется наличие поддержки скриптов.

А как же JQuery

JQuery может манипулировать лишь со стилями конкретного элемента, и если вы думаете, что JQuery поддерживает селекторы, то это так, но он настраивает стили каждому элементу, и не использует наследование из CSS. JQuery использует аналогичный принцип, что при getComputedStyle, если использовать его для получения стиля элемента. У JQuery анимация скриптовая, в том время, как при помощи генерируемых скриптов можно сделать анимацию, основанная на анимации CSS.