Архив рубрики: CSS

Цветной вывод в отладочную консоль браузера

CSS, JavaScript, цвет

Метод console.log достаточно популярен у пишущих на JavaScript — он позволяет выводить отладочную информацию, справляясь как со скалярными данными, так и с объектами.

Недавно выяснил, что иногда console.log ведёт себя подобно функции printf из си-подобных языков: первый свой аргумент воспринимает как описание формата, где ищет начинающиеся с процента последовательности, а выводимые по описанному формату данные начинаются со второго аргумента. Так, например,

console.log('%d', 77/64)

выведет целое число 1, а

console.log('%f', 77/64)

выдаст 1.203125, что получилось бы и без '%f'. При этом бо́льшая часть знакомых по Си или Перлу форматов вообще не работает — встретив такое, console.log посчитает первый аргумент обычной строкой, которую надо вывести — так

console.log('%x', 48879)

выведет %x 48879 вместо ожидаемого слова beef.

Но зато у console.log нашёлся формат %c, позволяющий применить к выводимому тексту стили, заданные вторым параметром — так можно раскрашивать вывод

Пример использования — codepen.io/jscottsmith/pen/VLzMLo

Как задать ширину блоков, когда есть LESS и Bootstrap 3

Bootstrap, CSS, LESS

Чтоб не замусоривать код веб-страниц классами, которые предлагает фреймворк Bootstrap, лучше добавить свойства из этих классов к своим классам либо id, которые и так уже присутствуют в коде — для этого в CSS-препроцессоре LESS есть функция extend. Однако оно не всегда работает: код


.logo {
  &:extend(.col-xs-6);
  &:extend(.col-sm-4);
  &:extend(.col-md-6);
}

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

Работает другое:


.logo {
  .make-xs-column(6);
  .make-sm-column(4);
  .make-md-column(6);
}

Результат —


.logo {
  float: left;
  width: 50%;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 480px) {
  .logo {
    float: left;
    width: 33.33333333333333%;
  }
}
@media (min-width: 960px) {
  .logo {
    float: left;
    width: 50%;
  }
}

Рецепт найден на https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

Подсветка синтаксиса LESS- и SCSS-файлов в geany

CSS

Пробую на работе писать код в geany — он в отличие от Комодо, Атома и Вижл Студио Кода сделан сам по себе, а не из браузера и поэтому гораздо шустрее. Имеющаяся у меня версия 1.24.1, вышедшая почти три года назад (да, я знаю, что есть и более свежие, но у меня дебиан) не подсвечивает синтаксис в LESS- и SCSS-файлах, а при ручном указании типа (Document → Set Filetype → Markup Languages → Cascading Stylesheet) подсветка хоть и включается, но ругается на особенности синтаксиса, выходящие за рамки обычного CSS.

Решение нашлось на http://superuser.com/questions/344441/less-syntax-highlighting-in-geany:

1. В файле ~/.config/geany/filetype_extensions.conf меняем

CSS=*.css

на

CSS=*.css;*.less;*.scss;

Если такого файла нет, его можно взять из /usr/share/geany (в дебиане — так).

2. В файл ~/.config/geany/filedefs/filetypes.css (который тоже можно взять из /usr/share/geany) добавляем

[lexer_properties]
lexer.css.less.language=1

3. Если geany уже запущен — перечитываем конфигурацию: Tools → Reload Configuration

Подсветка синтаксиса LESS-файлов в geany

Результат — подсветка включается автоматически при открытии LESS- и SCSS-файлов и всякие специфические штуки отображаются нормально: geany теперь не ругается на вложенность правил, на селекторы с амперсандом, на комментарии в стиле C++ (две косые черты), на LESS-переменные с @собакой и на SCSS-переменные с $долларом.

Statt zu schlafen

CSS, Drupal, HTML, JavaScript, LilyPond, MuseScore, OCS, OJS, Perl, PHP, Ruby, subversion, WordPress, деньги

Учёт домашних доходов с расходами — сплошное расстройство. Теперь вот вместо того, чтоб спать, пытаюсь вспомнить, что же умею делать за деньги, потому что на одну зарплату прокормить семью вообще нереально.

Могу:

  • Программировать на Перле — как древние CGI-приложения и прочее легаси, так и современные, с использованием фреймворков Mojolicious, Dancer, Catalyst.
  • Программировать на PHP: в основном допиливать существующие приложения, а не писать с нуля что-то большое. Могу писать с нуля что-то мелкое с фреймворком Slim.
  • Настраивать CMS Drupal и WordPress, а также дорабатывать их темы оформления.
  • Настраивать и дорабатывать Open Journal Systems, включая реализацию многоязычности имён — делал это в OJS 2.4.2, 2.4.7.1, 2.4.8.1, думаю, и в Open Conference Systems смогу реализовать.
  • Кроссбраузерно верстать веб-страницы, применять адаптивный дизайн, грамотно использовать возможности HTML5 и CSS3.
  • Немножко программировать на Руби (в том числе, с использованием Ruby on Rails) — наверное, на юниорском уровне.
  • Немножко программировать на ЯваСкрипте — как голый JavaScript, так и с jQuery. Совсем чуть-чуть — nodejs, Angular, Vue.
  • Писать тесты на перле, пхп и руби.
  • Постоянно внушать коллегам необходимость использования багтрекера и системы контроля версий.
  • (хоть и не считаю это основными профессиональными навыками) фотографировать, петь, аккомпанировать на шестиструнной гитаре, преподавать, водить легковой автомобиль, быть Дедом Морозом, штурманом и инструктором по водному туризму, набирать ноты в MuseScore и LilyPond и тексты с формулами в TeX — медленно, но красиво.

1000 рублей

Хочу от 15 USD / 1 kRUB в час.

  1. Statt zu schlafen (нем.) — вместо того, чтобы спать
  2. Резюме — http://shoorick.ru/cv

Косой левый край

CSS, HTML

Задача — сделать на веб-странице косой левый край у текстового блока, то есть, нужна лесенка из строк. Ширина страницы произвольная, текст должен переноситься автоматически.

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

Косой край

Готовый пример — http://codepen.io/shoorick/pen/MaEdPN