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

Небольшая заметка о том, как подключить в 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-у).

Прицепил к этому блогу мобильную вёрстку. Учитывая насколько примитивен здесь дизайн, это оказалось несложно. Заняло 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. Это довольно грубое и нехорошее решение. Но, увы, других простых решений на этот счёт я не знаю. Проблемы:

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

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

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

• Placeholder-ы
• FormData, FileReader, Blob, Uint8Array
• Flexbox

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

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

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

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

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

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

Сразу отмечу, что я не имею никакого отношения к миру 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. Такие вот дела.