Результаты поиска для: css grid

Номера записей: 40

CSS Grid Layout и позиционированные элементы

Перевод статьи CSS Grid Layout and positioned items с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

В этой статье мы рассмотрим некоторые особенные возможности позиционированных грид-элементов.

В рамках работы Igalia над CSS Grid Layout в Chromium/Blink и Safari/WebKit, мы реализовали поддержку позиционированных элементов. Да, абсолютное позиционирование в гриде :)

Вероятно, сама идея позиционированных грид-элементов покажется вам странной, но не спешите с выводами. Идея статьи — рассмотреть, как они работают в грид-контейнере, поскольку у них есть свои особенности.

(далее…)

Мысли вслух о подсетках в CSS Grid Layout

Перевод статьи Subgrids thinking out loud с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Итоги наших размышлений о функции подсеток из спецификации CSS Grid Layout.

За последние недели подсетки стали острой темой, в основном из-за статьи «Подсетки в Grid Layout жизненно важны» Эрика Мэйера (кстати, первод есть у нас на сайте — прим. перев.), в которой он привёл несколько примеров того, где подсетки могут оказаться весьма кстати. Эти примеры так или иначе связаны с предыдущей статьёй fantasai на эту же тему. К тому же Рэйчел Эндрю рассказывала про подсетки в своём блоге и в своей последней электронной книге про Grid Layout (что вполне достаточно, чтобы получить представление о синтаксисе и основных функциях грида).

Возможно вы в курсе, что последнее время Igalia работает над реализацией CSS Grid Layout в Chromium/Blink и Safari/WebKit. Как разработчики, мы решили, что неплохо будет поделиться нашим откликом на эту тему, так что на этой неделе команда, работающая над Grid Layout (Серхио, Хави и я) договорились о встрече для рассмотрения функции подсеток. Вот наши первые соображения об этом и первое черновое предложение насчет возможной реализации.

(далее…)

Подробно о размещении элементов в грид-раскладке (CSS Grid Layout)

Перевод статьи Deep Dive into Grid Layout Placement с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Полный обзор разных методов позиционирования элементов, предлагаемых спецификацией CSS Grid Layout.

В последние месяцы в рамках моей работы в Igalia я сосредоточенно доделывал те новые/пропущенные места в реализации CSS Grid Layout в движке Blink, что относились к размещению элементов. Вкратце, работа в основном велась по 2 направлениям:

  • Поддержка неявного грида перед явным. Так, чтобы к гриду можно было добавлять полосы не только в направлении заполнения (обычно справа/снизу), но и с противоположной стороны.
  • Правильная интерпретация неизвестных именованных грид-линий. Это случай, когда элемент привязывается к линии под названием «foo», но нигде в гриде нет линий с таким именем.

Эти задачи могут показаться простыми, но из них вытекало немало изменений в реализации самого механизма. Ради их завершения мне в итоге пришлось чуть ли не переписать весь код нахождения позиций в гриде. Я даже написал документ с пояснением всего плана и всех технических подробностей, где можно найти ссылки на все соответствующие патчи.

Теперь, когда я всё это доделал, самое время объяснить, как им пользоваться. Хотя мой коллега Серхио уже писал об этом в 2014-м, спецификация с тех пор поменялась, так что, думаю, лучше попытаться объяснить всё целиком с нуля. Эта статья — что-то вроде выжимки с примерами из раздела «Размещение грид-элементов» спецификации CSS Grid Layout.

(далее…)

CSS Grid Layout включен по умолчанию в Firefox 45.0a1

В ноябре Firefox (ночные сборки, на сегодня это версия 45.0a1) стал первым браузером, в котором нынешняя версия CSS Grid Layout включена по умолчанию. Можно скачать, установить, запустить и сразу проверять примеры из наших статей, не «колдуя» в настройках. Похоже, разработчики Firefox всерьез решили выпустить 45-ю версию с полноценной поддержкой Grid — количество свежезакрытых багов по этой теме впечатляет. Уже 14 декабря эта версия перейдет в статус альфы, а там всего 3 месяца — и релиз. ВеCSSна обещает быть жаркой! :)

CSS Grid Layout — на финишной прямой

На прошлой неделе Рабочая группа CSS в W3C объявила о намерении уже этой осенью перевести спецификацию CSS Grid Layout 1 в статус кандидата в рекомендации — т.е. фактически стандарта, полностью готового к реализации без префиксов и флагов. Все оставшиеся непроработанными спорные моменты нужно «утрясти» не больше чем за месяц. Поэтому Рабочая группа CSS призывает всех интересующихся поскорее ознакомиться с текущим вариантом и поучаствовать в его обсуждении.

…Мы хотим, чтобы все были довольны, но этого не получится, если вы начнете жаловаться после того, как мы закончим и все уже выпустят свои реализации, а вы соблаговолите сказать нам, что вам что-то не нравится, лишь через пару лет, так ведь? Так что посмотрите сейчас, и лучше жалуйтесь раньше, а не позже. :)

В числе моментов, которые особенно важно обсудить сейчас — свойства row-gap и column-gap и их влияние на общую ширину грид-полос, уточнение автоматического определения размера полос, добавление возможности распределения контента по аналогии с флексбоксами, а также масса небольших уточнений. Всё это нужно прояснить и проработать до осени! Особенно значимы для W3C комментарии от веб-разработчиков — ведь именно им в первую очередь нужен двумерный механизм раскладки. Так что, если не хотите терпеть неудобства от стандарта потом, скорее знакомьтесь с текущей версией (напр. по статьям на нашем сайте), смело экспериментируйте с ней и помогите сделать стандарт удобным!

Золотая рыбка CSS3 Grid Layout (часть 3)

Благодаря нашим недавним погружениям в волшебный мир этого модуля, мы уже смогли прочувствовать его силу и невероятные возможности, которыми он наделён. Но, несмотря на множество примеров и описаний разделов CSS Grid Layout Module Level 1, есть ещё немало сюрпризов, о которых стоит поговорить. Поэтому, как вы уже догадались, в этой статье мы продолжим прогулку по этой спецификации, ведь золотая рыбка задолжала нам ещё желания;)

Кстати, так совпало, что параллельно с нами Эмиль Бьёрклунд также ведёт свою серию статей, посвящённую спецификации Grid Layout. Поэтому, чтобы лучше прояснить для себя механизм этой раскладки, мы настоятельно рекомендуем ознакомиться со статьями Эмиля. Для этого можно пройти к нему в гости, либо прочитать перевод у нас на сайте.

Пожалуй, начнём…

(далее…)

Золотая рыбка CSS3 Grid Layout (часть 2)

В прошлой статье золотая рыбка Grid Layout выполнила для нас множество прекрасных желаний, но тем не менее, это далеко не всё, на что она способна. При помощи волшебства Grid Layout можно творить такие вещи, для которых раньше нам бы понадобилось куча «костылей» и хаков, либо исключительно JavaScript.

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

(далее…)

Золотая рыбка CSS3 Grid Layout (часть 1)

После написания моей недавней статьи про плотную упаковку блоков я всё-таки не смог удержаться от соблазна более подробно познакомиться со спецификацией CSS Grid Layout Module Level 1, и меня удивило, почему я раньше не обращал на неё внимание. Поэтому в виде заслуженного наказания я решил написать о ней эту статью.

Возможно многие из вас уже задавали себе вопрос, что делает в названии статьи фраза «Золотая рыбка» и как это связано со спецификацией CSS Grid Layout? Дело в том, что по мере изучения этого модуля я пришёл к мнению, что это настолько мощный и невероятно гибкий механизм, что, как и золотая рыбка, он может выполнить любое ваше желание. Даже модный Flexbox не может похвастаться таким арсеналом.

Вот список некоторых возможностей этого модуля:

(далее…)

Рабочая группа CSS определяет состав будущего CSS-2017

На вчерашней телеконференции участники рабочей группы CSS в W3C обсудили, какие модули спецификации войдут в следующее официальное определение CSS, которое заменит нынешний CSS-2015. Список модулей, более-менее отсортированный по убыванию готовности и разбитый на группы «Уже есть в списке», «Будут добавлены» и «Пока не в списке», в черновом виде уже доступен на гитхабе.

Первый и почти гарантированный кандидат «на влёт» в новое официальное определение — это модуль CSS-переменных, точнее, пользовательских свойств. В уходящем году о них немало писали и рассказывали на конференциях и митапах, и неспроста: они могут такое, что препроцессорам и не снилось. А теперь еще и поддерживаются почти во всех браузерах! В наступающем году поддержка станет еще лучше (Edge уже понемногу исправляется).

Среди рассматриваемых кандидатов также модули выравнивания блока 3 уровня (обобщение всевозможных align-* и justify-* для разных ситуаций), грид-раскладки 1 уровня (уж его-то точно надо!), Ruby-раскладки 1 уровня (создавался для крошечных подсказок к восточным текстам иероглифами, но сейчас, в эпоху всепроникающих эмодзи, иероглифами пишут почти все!:), текста 3 уровня (всё про межсловные пробелы, переносы слов, выключку текста и т.п.), направления письма 3 уровня (важно для мультиязычных сайтов, а еще влияет на направление главной и поперечной осей в тех же флексбоксах) и CSS-фильтров 1 уровня (мощный инструмент для впечатляющих визуальных эффектов с графикой и не только).

Так что следите за новостями! И с наступающим Новым годом, с открывающимися новыми возможностями!

Математика CSS-шлюзов

Перевод статьи The math of CSS locks с сайта fvsch.com для CSS-live.ru, автор — Флоран Вершельд

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

Эту идею, вместе с одной из реализаций, предложил Тим Браун в статье «Гибкая типографика с помощью CSS-шлюзов»

Когда я вникал в реализацию Тима и пробовал свои варианты, мне было нелегко разобраться, что именно там происходит. По ходу дела я набросал кучу формул, и решил, что будет полезно поделиться пояснением математической части.

Я опишу сам приём, его ограничения, и математику, на которой он строится. Но не пугайтесь насчет математики: по сути это сложение и умножение, к тому же я расписал всё по шагам подробнее некуда, а еще будут симпатичные графики.

(далее…)

Еженедельная подборка красивых эффектов на CSS/SVG/JS #22

Подборка свежих эффектов, интересных идей и полезных наработок.

Солнечная система

Интерактивная солнечная система на JS.
Автор: Жулиан Гарнье (@juliangarnier)

Солнечная системаПосмотреть живой пример


(далее…)

Подсетки в Grid Layout жизненно важны

Перевод статьи Subgrids Considered Essential с сайта meyerweb.com для css-live.ru. Автор — Эрик Мейер.

Модуль Grid layout — невероятно фантастическая штука. Я познакомился с ним подробно во время написания главы про грид-раскладку в четвёртом издании своей книги «CSS: полное руководство», и он позволяет вытворять с раскладками такое, что нам даже не снилось. И, кажется, я понял одну недостающую деталь — мощь и необходимость подсеток.

В подтверждение моих слов, рассмотрим пример, который можно наблюдать в различных формах на этой тестовой странице. Я практически целиком содрал этот пример у Fantasai, но разберу его немного иначе. За основу возьмём форму с разными полями и метками, находящимися в неупорядоченном списке, чтобы позаботиться о доступности и, в принципе, для чтения и удобства, если вдруг CSS не отобразится. Разметка выглядит так:

(далее…)

Первый CSS-модуль 4 уровня в статусе кандидата в рекомендации

На днях рабочая группа CSS в W3C решила напомнить нам, что будущее уже здесь, и без лишнего шума опубликовала CSS-модуль каскада и наследования 4 уровня в статусе кандидата в рекомендации. Это не опечатка. Модуль с «магической» цифрой 4 в названии — мы бы с радостью обозвали его звучным «CSS4», если бы в этом было хоть сколько-нибудь смысла — в статусе, означающем полную теоретическую готовность спецификации. Добро пожаловать в 2016-й!

(далее…)

Почему я в восторге от «родных» CSS-переменных

Перевод статьи Why I’m Excited About Native CSS Variables  с сайта philipwalton.com, опубликовано на css-live.ru с разрешения автора — Филипа Уолтона.

Несколько недель назад CSS-переменные — точнее, пользовательские CSS-свойства — стали доступны в Chrome Canary за флагом «Экспериментальные возможности веб-платформы».[1]

Как только один из разработчиков Chrome Эдди Османи написал о новинке в Твиттере, на него неожиданно обрушилась масса недовольства, злобы и скептицизма. По крайней мере, неожиданно для меня, учитывая, как меня эта возможность восхитила.

(далее…)

Лакомые кускочки Grid-раскладки, часть 3: размеры грид-полос

Перевод статьи Grid Tidbits part 3: grid track sizing с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).

В этой заметке исследуются некоторые тонкости задания размеров грид-полос (иначе — рядов и колонок) в CSS Grid Layout. Гибкие размеры, функция повторения, функция minmax — вот это да!

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

Чтобы экспериментировать с примерами из этой заметки, рекомендую скачать и запустить Chrome Canary, поскольку в этом браузере самая актуальная реализация.

(далее…)