misc/class
lib/jquery_pnotify, lib/moment, lib/lodash, misc/notification, site/engine, misc/social
if( $.browser.msie && $.browser.version <= 8 ) include('lib/respond'); $._social.__cfg = {"init":[{"service":"basic"},{"fb_app_id":"1997094873850041","service":"fb"},{"vk_app_id":"2978320","service":"vk"},{"service":"twi"}],"like":[{"service":"fb"},{"service":"vk"},{"via":"","channel":"","hash_tag":"","service":"twi"}]}; window._SiteEngine = new classes.SiteEngine( { user_id: 0, controller: 'content_tape', action: 'tag', content_css_version: '1459538664', social_enabled: 0} );

Faiwer

Блог web-программиста

Поиск по метке: CSS

Webpack + PostCSS + SCSS

7 декабря 2016

Небольшая заметка о том, как подключить в webpack и в ваше приложение postCSS с поддержкой SCSS/SASS синтаксиса.

  • Устанавливаем npm i --save css-loader node-sass sass-loader style-loader postcss-loader
  • Добавляем в webpack.config.js новый loader в раздел module.loaders такую вот цепочку:
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'postcss', 'sass']
    }
    
  • Подключаем в нужном JS-файле стили: import './main.scss'
  • Запускаем webpack

Потребовалась вереница loader-ов. В случае необходимости можно ещё понастраивать postcss (см. документацию к postcss-loader-у).

Мобильная вёрстка

2 апреля 2016

Прицепил к этому блогу мобильную вёрстку. Учитывая насколько примитивен здесь дизайн, это оказалось несложно. Заняло 10-15 минут. Хочу остановиться на ключевых моментах.

<meta/>

Для начала необходимо указать браузерам то, что они вольны в определённых пределах менять пикселное разрешение viewport-а. По-умолчанию мобильные браузеры исходят из того, что едва ли сайт адаптирован к мобильной вёрстке, а значит, рендерить его в комфортных для просмотра 500px по ширине = убить всю вёрстку вхлам. Поэтому для viewport-а устанавливается что-нибудь вроде 1280px, и экран мобильника имитирует из себя полноценный монитор.

Если влепить в HTML такой мета-тег: <meta name="viewport" content="width=device-width; initial-scale=1.0"/>, то браузер будет волен взять такой width, который вшит в устройство как комфортный для данной модели. В зависимости от того, какого размера экран, это число будет различным. К примеру если у вас какая-нибудь лопата или планшет, то там и за 1000px может перевалить.

Параметр initial-scale немаловажен, т.к. он фиксирует изначальный zoom страницы в значение 100%. Дескать не надо извращений, всё адаптировано и отобразится хорошо.

Media-Queries

Дальнейшие шаманства, в основном, связаны с media-queries. Для тех кто с ними не знаком, это такая возможность задать ряд CSS правил, которые будут применяться в зависимости от ситуации. К примеру только тогда, когда ширина экрана не превышает x-пикселей:

@media screen and (max-width: 980px){}

Или наоборот, когда не менее х-пикселей:

@media screen and (min-width: 980px){}

Вариаций и трюков довольно много. Но эти два самые распространённые. 

В шапке сайта сверху справа отображается иконка дельтаплана. На малых экранах она перегораживает меню. Скрываем её:

@media screen and (max-width: 980px)
{
    header .sh_top:after { display: none; }
}

YouTube и прочие <iframe/>-ы

С ними всё сложнее. Они отображаются с фиксированными, вшитыми размерами. Но ведь у нас плавающая ширина сайта. Что делать? Главная проблема ― как задать height пропорциональным width? Ну можно сделать, скажем так:

  1. Располагаем <iframe/> внутри другого блока-обёртки
  2. Блоку обёртке задаём
    • width: 100%
    • position: relative
    • height: 0px
    • padding-bottom: 56.25%
    • font-size: 0; line-height: 0;
  3. Самому <iframe/>-у:
    • position: absolute
    • top: 0; left: 0; width: 100%; height: 100%;

Т.е., по сути, мы заставляем <iframe/> занимать 100% родительского блока. А сам родительский блок занимает всю ширину экрана. При этом его высота зависит от его ширины, благодаря свойству padding-bottom. Шрифты гасим в ноль, дабы убрать нежелательные отступы.

Изображения

С ними такая же проблема: размеры, для того, чтобы страница не скакала при загрузке, вшиты. Проблему решаем так:

.site_content img {
   max-width: 100%;
   height: auto !important;
}

Т.е. ограничиваем их максимальную ширину (это свойство сильнее, чем width). А height насильно срезаем, задав ему auto. Это довольно грубое и нехорошее решение. Но, увы, других простых решений на этот счёт я не знаю. Проблемы:

  • Страница снова прыгает при загрузке, т.к. браузер не знает какой размер примет изображение до того момента, пока оно не загрузится.
  • Если рисунок был отображён непропорционально, то теперь он будет отображаться пропорционально принудительно.

Однако результат того стоит. Если вы знаете решение получше, милости прошу в комментарии или мне на почту ;)

Об IE9 замолвите слово

21 марта 2016

Минутка гнева… Internet Explorer 9 не умеет:

  • Placeholder
  • FormDataFileReaderBlobUint8Array
  • Flexbox

Помимо этого обладает ужаасным набором инструментов, постоянно дохнет и очень медленно работает. В общем, этот браузер не так уж и далеко ушёл от своего 8-го собрата. 

Переносы в тексте

24 ноября 2015

В то время как браузеры умеют WebGL, анимации и многое другое, до сих пор не вменяемой поддержки таких значимых вещей как нормальная вёрстка таблиц, переносы в тексте, полноценная поддержка unicode-а в регулярных выражениях, justify-выравнивание и т.д.. Сий пост про переносы текста.

Итак. Что мы имеем? Мы имеем css3 свойство hyphen: auto. Но довольно унылую поддержку. Во-первых его не умеет ни Chrome, ни его клоны. Во-вторых его не умеет Firefox под linux. В третьих (в чём я не уверен) поддержка идёт на уровне встроенных словарей. Т.е. если вам потребовалась поддержка переносов в, к примеру, казахском тексте, вас снова ждёт облом. Но само свойство хорошо. В идеале вбив его можно забыть про все проблемы, ибо браузер сам их порешает.

Что у нас есть ещё вналичии? Есть такие опции как word-breakword-wrapoverflow-wrapline-break. К сожалению никакая комбинация этих свойств не позволяет добиться нормальных переносов в таблице, которую перекашивает, как раз из-за отсутствия этих переносов. Например вы можете добиться вот такого вот результата:

Подробности под катом…

подробности…

Установка ruby-compass под linuxmint

20 ноября 2014

Сразу отмечу, что я не имею никакого отношения к миру ruby. Изредка пишу простые скриптики для небольших личных нужд, не углубляясь ни в дебри языка, ни в его окружение. В очередной раз обновив с нуля систему, я снова столкнулся с задачей установки compass-а. И в очередной раз все стандартные способы надо мною надругались. Казалось бы, linuxmint ― это просто разновидность ubuntu, самого популярного репозитория, а значит установка популярной либы не должна быть проблемой. Но нет...

Установить compass можно как-минимум двумя способами. Первый это привычный нам aptitude: sudo aptitude install ruby-compass. Программа устанавливается без ошибок, и даже позволяет узнать её версию. Но вот работать отказывается на отрез, ругаясь на отсутствие какого fssm. Быстрый поиск решения проблемы результатов не дал. Выполнив sudo aptitude purge ruby-compass, я решил воспользоваться стандартным механизмом для ruby ― gem. Итак: gem install compass выбрасывает мне ошибку доступа. Дескать в /usr/... ему недостучаться, и он просит root-а. Такое поведение мне кажется странным, но ладно, ок, установим из под root-а. Установка проходит успешно, но вот сам compass после этого запускаться отказывается. Нужен root. Вот это уже действительно странно. 

В конечном счёте я нагуглил установку с таким вот ключём gem install --user-install compass. Установка прошла успешно. Но вот никаких удобных ссылок для запуска программы не было создано. Пришлось руками лепить ссылку к ~/.gem/ruby/1.9.1/gems/compass-1.0.1/bin/compass. Теперь всё работает. 

Самое удивительное, так это то, что далеко не каждый пакет из gem требует таких вот бубнов. И что на офиц. сайте compass-а предлагают не суетиться, и просто запустить gem install compass. Такие вот дела.