Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

«Сделайте мне красиво!» Выпуск №24

Чулан
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Сегодня у нас в гостях Вячеслав Олиянчук aka miripiruni

Show notes:


Наши ссылки: RSS и лента на rpod.ru
Всего голосов 30: ↑22 и ↓8 +14
Просмотры 610
Комментарии 1

Будущее CSS разметки

CSS *
Питер Гасстон, автор книги по CSS3, опубликовал статью под названием The future of CSS layouts, перевод которой специально для читателей хабра представлен ниже.

Несмотря на все поразительные возможности CSS, их недостаточно для реализации фундаментальных принципов разметки страницы. Однако, дополнительные возможности для создания более динамических страниц уже начинают появляться.

После нескольких лет обещаний, CSS3 наконец-то преуспел в стилях. Он добавил в наш арсенал целый набор новых инструментов, обеспечив нас закруглёнными углами, градиентами, прозрачностью, преобразованиями элементов, анимацией и многим другим. Что же ещё сможет порадовать наш глаз?

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

Консорциум W3C и создатели браузеров в курсе этих проблем и работают над рядом решений. Лидером среди них является (как не удивительно) Internet Explorer. Похоже, что IE10 будет предвестником новой эры CSS разметки, которая позволит создавать отличные, динамические и привлекательные сайты, используя недосягаемые ранее возможности.

В данной статье автор рассматривает различные методы разметки, которые хотелось бы использовать на отдельных стадиях разработки, от уже внедренных до чисто теоретических. Возможно, не все из них нам удастся использовать в дальнейшем (по крайней мере не в текущей форме), но стоит взглянуть на эти методы, чтобы понять будущее CSS разметки.
Читать дальше →
Всего голосов 97: ↑93 и ↓4 +89
Просмотры 13K
Комментарии 76

Новое в CSS3: многоколоночность, flexbox, сеточная разметка

Разработка веб-сайтов *CSS *
Tutorial
Веб развивается, появляются все новые возможности разметки страниц для верстальщиков, в том числе в этом помогают новые свойства в CSS. В этой статье я описал некоторые из них: многоколоночность, flexbox и сеточная разметка.

Поддержку новых функций браузерами можно проверить на сайте caniuse.com:



Читать дальше →
Всего голосов 60: ↑57 и ↓3 +54
Просмотры 90K
Комментарии 47

Новинки Opera Mobile 12.1 и беты Opera 12.10 (Flexbox!)

Блог компании Opera Разработка веб-сайтов *
Вчера мы выпустили два новых релиза: стабильную версию Opera Mobile 12.1 для Андроида и новую сборку беты Opera 12.10 для десктопа. Список изменений для разработчиков оказался настолько интересным, что мы не смогли удержаться, чтобы не рассказать о них подробнее.

Opera Mobile 12.1


Это обновление Opera Mobile 12.1 в основном касается движка, интерфейсных изменений пока не ищите.

Opera всегда была известна, как самый быстрый браузер, поэтому после появления поддержки протокола SPDY в бетах 12.10 для десктопа, логично было бы принести эту технологию туда, где это важно ещё больше — на мобильные. Поэтому в этом релизе Opera Mobile получает поддержку SPDY для сайтов, которые его поддерживают.
Читать дальше →
Всего голосов 52: ↑46 и ↓6 +40
Просмотры 27K
Комментарии 139

Всем, всем, всем: время обновлять свой CSS3

CSS *HTML *
Перевод
Tutorial
Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.

Читать дальше →
Всего голосов 77: ↑73 и ↓4 +69
Просмотры 40K
Комментарии 48

Вышел Firefox 18

Firefox
С небольшой задержкой стал доступен для загрузки стабильный релиз Firefox. Официальный же релиз должен состояться сегодня, 8 января (скорее всего ближе к вечеру).
Что нового в этой версии:
Читать дальше →
Всего голосов 88: ↑75 и ↓13 +62
Просмотры 48K
Комментарии 67

Новая CSS директива @supports

CSS *JavaScript *
Перевод
Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox, Chrome и Opera недавно объявили о поддержке CSS директивы @supports и CSS.supports (JavaScript), которые помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Давайте посмотрим на них в деле!
Читать дальше →
Всего голосов 37: ↑35 и ↓2 +33
Просмотры 41K
Комментарии 28

Выравниваем блок по центру страницы

CSS *HTML *
Tutorial
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Читать далее
Всего голосов 69: ↑51 и ↓18 +33
Просмотры 765K
Комментарии 52

Анимирование Flexbox с помощью CSS Transition

CSS *HTML *
Из песочницы
Все уже знают про Flexbox. Кто-то испытывает его на продакшене, кто-то только изучает, а кто-то недоумевает, чем он лучше таблиц. Пока вы занимаетесь этим, поделюсь с вами приятной новостью: flexible контейнеры неплохо анимируются с помощью CSS transition.

Расскажу, как это использовать и что с этой радостью можно делать.
Читать дальше →
Всего голосов 33: ↑32 и ↓1 +31
Просмотры 31K
Комментарии 6

Создаем сетку с помощью Susy

Разработка веб-сайтов *CSS *HTML *
Из песочницы


Susy — тулкит для создания сеток, с помощью которого можно решать множество разнообразных задач по расположению контента. В отличии от фреймворков, таких как Bootstrap или Foundation, Susy не предоставляет предопределенных классов для использования, а только лишь набор функций и миксин, после знакомства с которыми можно сделать много большее.

В этой публикации будут рассмотрены основные возможности Susy на примерах, а так же будет добавлен вывод с использованием flexbox.
Читать дальше →
Всего голосов 21: ↑19 и ↓2 +17
Просмотры 47K
Комментарии 5

Практическое применение FlexBox

Разработка веб-сайтов *CSS *
Привет, хабр!

Одним прекрасным вечером, не предвещающим ничего интересного, в наш чатик поступило предложение от автора публикации «Переводим в код 5 действительно полезных шаблонов адаптивной разметки», написанной им весной 2012 года, написать статью-ремейк, но с применением FlexBox и сопутствующим пояснением что и как работает. После некоторой доли сомнений, интерес глубже разобраться в спецификации все таки победил и я благополучно сел верстать те самые примеры. В ходе погружения в эту область стало выясняться множество нюансов, что переросло в нечто большее чем просто переверстать макетики. В общем в данной статье хочу рассказать о такой чудесной спецификации, под названием «CSS Flexible Box Layout Module» и показать некоторые ее интересные особенности и примеры применения. Всех кому интересно, любезно приглашаю под хабракат.
Читать дальше →
Всего голосов 56: ↑54 и ↓2 +52
Просмотры 356K
Комментарии 40

Обновление серверов Opera Mini: Flexbox, ES5, HTML5-парсер

Блог компании Opera Разработка веб-сайтов *Opera Браузеры


Мы обновили сервера Opera Mini до новой версии нашего движка Presto. Это значит, что раскладки на Flexbox и единицы измерения rem будут работать, как вы и ожидали.

Как вы уже наверняка знаете, Opera Mini отрисовывает страницы на серверах Opera, и они потом в сильно сжатом формате отправляются обратно в клиенты на устройствах. Это значит, что все пользователи сразу же увидят страницы, отрисованные обновлёнными серверами Mini — им не понадобится обновлять программы. Автоматическое обновление для 260 миллионов пользователей всего за одни выходные. Ого.
Читать дальше →
Всего голосов 30: ↑28 и ↓2 +26
Просмотры 15K
Комментарии 22

Строим с flexbox

Разработка веб-сайтов *CSS *HTML *
Tutorial
В данной обучающей статье мы разберем некоторые реальные и некогда действительно трудновыполнимые моменты, которые сейчас легко решаются благодаря использованию flexbox.


Читать дальше →
Всего голосов 16: ↑15 и ↓1 +14
Просмотры 85K
Комментарии 8

Flexbox на примере игрального кубика

Разработка веб-сайтов *CSS *HTML *
Из песочницы
Tutorial
Что если бы вы могли построить сложный css лейаут в считанные минуты? Flexbox — это новый лейаут CSS верстки, который позволяет легко построить динамические макеты. С Flexbox выравнивание по вертикали, блоки с одинаковой высотой, перестановка и направление становится проще простого.



Есть популярный миф, что flex еще не готов к использованию. Но это не так! У 93% людей сейчас запущен браузер, поддерживающий flexbox. Это лучше, чем поддержка для HTML5.

В этой статье я проведу вас через основы flexbox на примере создания игрального кубика. Сейчас мы пропустим некоторые из более сложных тонкостей flexbox, таких как вендорные префиксы, старая версия синтаксиса и браузерные причуды. Рассмотрим их в будущих уроках.
Читать дальше →
Всего голосов 30: ↑28 и ↓2 +26
Просмотры 49K
Комментарии 37

Используем CSS Flexible Box Layout Module. Часть 1: Введение

Блог компании Infobox
В данной статье мы рассмотрим использование модели CSS Flex Box, предназначенной для дизайна пользовательского интерфейса в браузере. В этой модели дети контейнера flex (гибкий) могут располагаться в любом направлении, адаптируя свои размеры: расти, чтобы занять неиспользуемое место или сжиматься, чтобы предотвратить переполнение родительского элемента. Можно легко перемещать детей по вертикальной и горизонтальной оси. Возможность вложения контейнеров flex друг в друга (по горизонтальной оси внутри вертикальной и наоборот) позволяет создавать макеты в двух измерениях.

В CSS 2.1 есть 4 режима разметки — алгоритма, определяющего размер и позиции элементов на основе их отношений с соседними элементами:
  • блочная (block) разметка, спроектированная для документов;
  • inline разметка для текста;
  • табличная (table) разметка для 2D данных в табличном формате;
  • позиционная (positioned) разметка для явного позиционирования элементов без учета других в документе.

Этот модуль предоставляет новый режим разметки flex, спроектированный для сложных приложений и веб-страниц.
Читать дальше →
Всего голосов 8: ↑4 и ↓4 0
Просмотры 5K
Комментарии 0

Flexbox для интерфейсов во всей красе: Реализация Tracks (Часть 1)

Блог компании PAYSTO CSS *
Перевод
Дни ухищрений с float и margin наконец позади, так как сегодня CSS предлагает разработчикам новые улучшенные возможности, которые отлично подходят для деликатных раскладок. Такие функции раскладок, как вертикальное выравнивание, равномерное распределение свободного пространства, управление порядком исходного кода и прочие шаблоны, вроде «липких» футеров, довольно легко воплотить с помощью flexbox.

В этой статье мы рассмотрим шаблоны раскладки, которые подходят для flexbox, используя интерфейс приложения Tracks, в котором также используются принципы атомного дизайна. Я расскажу вам, как flexbox доказал свою эффективность, и укажу некоторые подводные камни использования его вместе с определенными шаблонами раскладки. Мы рассмотрим шаблоны, которые создают проблемы, приведем примеры запасных вариантов и поделимся дополнительными тактиками того, как начать использовать данное свойство CSS немедленно.

Часть 2
Читать дальше →
Всего голосов 12: ↑9 и ↓3 +6
Просмотры 14K
Комментарии 1

Flexbox для интерфейсов во всей красе: Реализация Tracks (Часть 2)

Блог компании PAYSTO CSS *
Перевод
Продолжаем перевод статьи smashingmagazine, в котором подробно рассмотрены все нюансы разработки интерфейсов с помощью flexbox на примере сайта Tracks.

Часть 1
Читать дальше →
Всего голосов 9: ↑8 и ↓1 +7
Просмотры 14K
Комментарии 6

FlexboxLayout — часть 1

Блог компании speakASAP Разработка под Android *
Перевод
Tutorial

В мае 2016 года в официальном репозитории Google на Github появился новый проект — flexbox-layout. Это менеджер макетов под Андроид, который предоставляет функциональность, схожую с CSS flexible box. В этой серии статей мы посмотрим на FlexboxLayout и попытаемся понять, как он работает, и как его лучше использовать.


Мы рассмотрим влияние XML-атрибутов на макет и поведение вложенных представлений. Чтобы было проще разбираться, я опубликовал приложение в Google Play, которое позволяет поэкспериментировать с различными вариантами. Со временем я выложу исходный код этого приложения, а пока предлагаю скачать его и поиграться с настройками.


Также хочу отметить, что в этих статьях я буду рассматривать все действия с точки зрения разработки под Андроид, т.е. буду использовать стандартные макеты Андроида и отмечать, где FlexboxLayout позволяет получить схожий результат.

Читать дальше →
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 18K
Комментарии 7