Верстка

18-07-2019

Правило 5. Пробелы и переводы строк. HTML код компонента не должен содержать пробельных символов (пробелы, переводы строк, символы табуляции). Во время инициализации компонента и во время обработки пользовательских событий возникает задача – найти DOM узел относительно главного тега (this.mainElement). Например, мы хотим перевести фокус на input. Как это сделать? Самый быстрый вариант таков:

var input = this.mainElement.childNodes;

Но в том случае, если верстка содержит пробельные символы – мы не можем быть уверены, что по индексу 0 лежит нужный нам DOM узел это вполне может оказаться текстовый узел-пробел. Разные браузеры ведет себя по-разному, некоторые новые даже содержат специальные функции для доступа к DOM узлам, минуя текстовые узлы. Но для того чтобы все работало максимально быстро и кроссбраузерно лучше просто избавиться от всех пробельных символов. Кто-то может возразить – это совершенно нечитабельно. Осмелюсь не согласиться – для браузера это даже более читабельно, чем код с пробельными символами. К тому же в динамических сайтах вы можете писать как вам удобно, а перед отправкой данных в выходной поток автоматически убирать пробельные символы.

Заострю Ваше внимание еще раз на том, что альтернатива гораздо хуже. Если вы оставите пробельные символы, то вам придется пользоваться одним из следующих вариантов:

// 1. использовать поисковый CSS-селектор: var input = jQuery('#1 input:first'); // 2. использовать функцию getElementsByTagName var input = this.mainElement.getElementsByTagName(); // 3. писать циклы и проверять что очередной узел – не текстовый

CSS

Правило 6. CSS1. Короткие стилевые правила. Все стили должны быть корректными с точки зрения CSS1. А еще точнее – все должно работать даже на убогом IE6. Поэтому максимум, что мы можем использовать в CSS – это имена тегов и названия стилевых классов.

А так же хотелось бы, чтобы CSS правила были как можно короче (тогда они быстрее применяются, соответственно страничка быстрее отображается). Для этого все имена классов относящиеся к компоненту должны содержать в себе подстроку UISpinEdit:

С одной стороны мы получаем

У элемента span обязательно должен быть закрывающий тег, иначе, если написать , то IE воспримет это как просто открывающий тег.

Соответствующий .css файл будет выглядеть следующим образом:

/* UISpinEdit */ div.UISpinEdit { /* будет заполняться потом */ } input.UISpinEdit-input { border: 1px solid #117722; } span.UISpinEdit-plus { background: url(plus.gif) no-repeat; /* картинка для кнопочки */ width: 20px; /* ширина кнопочки-картинки */ display: inline-block; /* иначе ширина не применится */ } span.UISpinEdit-minus { /* аналогично предыдущему */ }

IMG


Смотрите также:
 Avast
 Верстка
 Компания "ТрансАвто"
 Спутниковый интернет, спутниковое телевидение
 Контроль за выполнением кода

Добавить комментарий:
Введите ваше имя:

Комментарий:

Защита от спама - решите пример:


Онлайн-игры для социальных сетей:

Понравились обзоры? Читайте еще!

Новые обсуждения на форуме:

Парк аттракционов "Сегодня парки отдыха практически повсеместно вытесняются тематическими парками, хотя обычно эти два определения смешивают.."
Зачем надо учиться играть в шахматы? "Шахматы долгое время считались игрой королей и аристократов.."