Pull to refresh

Comments 76

О дайте, дайте мне переменные в CSS и выражения с переменными (математические и строковые хотя бы).
Попробуйте less css. Там все это есть.
UFO just landed and posted this here
Переменные есть, выражения с переменными есть.

lesscss.org/
UFO just landed and posted this here
Переменные в lesscss по сути — это константы. На ходу изменять их нельзя.
Вещи, вроде SASS и LESS — по большому счету, хаки — закрывающие недостатки современной модели самого CSS.
Пока современная модель недостатки свои не закроет, эти «хаки» очень упрощают жизнь для разработчиков.
Ну с этим то я ни спорю :) Самому очень нравятся эти штуки.
и возможность использовать регулярные выражения чтобы заказ не могли передать другому верстальщику
и чтобы можно было к процентам пиксели добавлять и т.д.
На этот случай придумали функцию calc.
Как иллюстрация к названию, у меня не загрузился CSS :)
> Похоже, что IE10 будет предвестником новой эры CSS разметки

Да ну? ИЕ же не использует не утвержденные стандарты вроде как? Или уже использует? Определились бы уже наконец.

> но расширенное свойство в IE10PP позволяет усовершенствовать плавающий элемент

Начинается опять… Может стоит сначала полностью со старыми возможностями разобраться?
Грид лайот — придуман МС и соотсвенно реализован раньше в ИЕ.

>>Начинается опять… Может стоит сначала полностью со старыми возможностями разобраться?
Чего не умеет ИЕ10 из того что вам нужно?
Самое главное, чем не умеет ни одна версия ИЕ — грамотное обновление своих устаревших собратьев.

Какие конкретно сюрпризы нам принесет ИЕ10 мы еще узнаем в будущем, как обычно.
Давно реализовано через Windows Update (на маминой машине IE обновился до 9 версии именно через этот механизм, автоматически).

Другое дело, что не везде этот механизм включен администраторами.
В теории.

Вынужден вас расстроить, но это и есть неграмотный механизм. Windows Update все сваливает в одну кучу и с ним практически невозможно работать. У меня на одном компьютере включен апдейт автоматический, так компьютером практически невозможно пользоваться — он постоянно находится на обслуживании (обновляется, тормозит, просит перезагрузиться). Браузер ДОЛЖЕН обновляться отдельно от системы.

Во-вторых, Windows Update действительно чаще всего выключают. Например те, кто использует нелицензионный Windows. Это данность. Но причем тут обновление бесплатного браузера? Он все равно должен обновляться.

В-третьих, ИЕ9, как мы все знаем, не ставится на XP. ИЕ10 очевидно тоже не будет.
IE10 пока что не поддерживает Transition и Text Shadow. А это одно из самых замечательных свойств CSS3!

www.findmebyip.com/litmus/
> Text Shadow — одно из самых замечательных свойств CSS3!
Text Shadow — самое страшное оружие в руках говнодизайнера.
Text Shadow совсем не помеха говнодизайнерам.
Да и при чём тут дизайн то?
Не понимаю с чего вдруг про дизайнеров вспомнили. Хорошие дизайнеры пришедшие в веб дизайн из полиграфии часто используют аккуратные тени на шрифтах для создания эффекта объема или вдавленности. Главное — все хорошо в меру.

Если так рассуждать, то наличие огромной палитры цветов — тоже страшное оружие в руках говнодизайнеров
Да, давно пора вернуться к безопасным цветам =))
с другой стороны, часть переходов и тени давно реализованы в IE в виде фильтров (с версии 5.5, если не ошибаюсь).

меня больше волнует поддержка WebSockets.
За всю жизнь ни на одном сайте не видел использования text shadow — при том что он достаточно просто эмулируется через JS.
Разве кнопки с эффектом вдавленности или выпуклости не разу не видели? )
Вот раньше их делали картинками.
Причем тут кнопки? Там box-shadow используется скорее. Он в ИЕ 10 есть, и даже в 9 есть
Я про однопиксельную белую тень.
В этом примере ширина колонки установлена в 140px, значит в блоке шириной /800px/ (700px) должно появиться пять колонок:
Ширина указана правильно. Автор Хотел продемонстрировать, что в оставш еся 100 колонка не влезет, поэтому фактически их будет всего пять
Будущее здесь, а все равно приходится ждать.
Огромная просьба поправить терминологию: «табличная верстка» в русском твердо закрепилась за версткой при помощи table. Верстку же при помощи grid лучше перевести как «сеточную», а само слово grid — как «сетку», а не как «таблицу».
Очень интересные и полезные нововведения планируются. Насколько я понял — первые две уже реализованы в современных браузерах (кроме ИЕ), а остальные всё еще в планах?
Grid layout, конечно, круто. Эдак раз — и десятью строками разметил весь макет. Эх, когда же столь прекрасное время наступит…
На примитивных примерах да. Чуть добавьте динамики и все, приехали. Костыли на костылях будут.
Динамика в фундаментальных блоках? Типа, хедер с футером двигаются?
Динамика это не только анимация. Динамика, это когда пользователь может самостоятельно изменять отображение страницы или же под влиянием внешних факторов скрипты меняют содержимое и отображение.

Да, пользователь может сменить один вид отображения на другой, переместить блоки, включить или выключить расширенный/упрощенный вид отображения и так далее.
И какие будут костыли? Расставить несколько классов и прописать эти классы в CSS?
У нас есть вот такой темплейт
a b b
a b b
c b b


Блок поставили в "с". Потом понадобилось переставить его последним к блокам в секции "a", а сам лейаут заменить на другой, если в секции "с" не осталось ни одного блока.

Мне вот интересно, как вы будете последний пункт исполнять…
Ну никто же не говорит, что grid — панацея. Тем не менее, в 90% случаев фундаментальные блоки неизменны и постоянны.
Это динамика на стороне клиента, которая решается скриптами, про какие костыли речь?
Как надо, по-вашему, это делать правильно?
Это динамика на стороне клиента. Костылями называю весь тот код, который нужно будет написать по реализации задуманного.

Надо это делать так, как и реализовано сейчас — поведение элементов должно зависеть от местоположения в DOM-дереве и от соседних блоков, которые находятся в потоке, а не прибивать гвоздем позицию.
Будем надеяться, светлое будущее наступит скоро, и даже очень сложные странички станет создавать очень просто.

P.S. В CSS всегда «не радовало» то, что смешаны атрибуты задания внешнего вида (цвета, бэкграунды, прозрачности, и прочее) и структуры (позиция, обтекания, размеры, отступы и прочее).
Смущает то, что без префиксов всё это внедряется… Сhrome и Firefox по-интелегентному, с префиксами, мало ли чего… Из-за этого у меня, честно, никакой радости — больше проблем будет потом скорее всего!
Каких, например?.. Для меня вот проблема прописывание border-radius, -moz-border-radius и webkit-border-radius вместо одного свойства.
Примерно такие, какие были с box-model в IE5. Стандарт не утвержден, а MS уже всё реализовала
Ну если во всех (основных) браузерах делают один и тот же функционал, то почему бы не называть его одним и тем же именем?
И все-таки решение MS с сеткой самое удачное и понятное. Нафига изобретать велосипед, дайте уже верстальщикам размещать дивы как таблицу, многие давно об этом мечтают.
А display: table вам чем не угодил?
По моему grid выглядит изящнее. Если я правильно понимаю, то содержимое в коде можно размещать произвольно, а потом с помощью CSS «расставлять» его как надо. Например, основной контент можно поместить в начало кода страницы, а всякие сайдбары уже за ним. Поисковым роботам это наверняка понравится
А потом поменяйте динамически местоположение какого-то блока. Я хочу посмотреть на ту гору волос, которые вы нащипаете себе за время реализации задуманного. Перемещение элемента по DOM-дереву не даст вообще никакого эффекта, а работа с CSSOM еще тот ад.

Расставить все в первый и последний раз и больше никогда не трогать страницу — вполне удобно будет (ну, если удобным можно назвать тонны кода, которые придется написать, судя по примерам), а вот что дальше с этим одороблом делать, одному только Майкрософту известно.
Вы сами себе проблемы выдумываете. Посмотрите на html-код этого примера. Ничего лишнего нет. Есть только основные логические блоки, которые CSS-ом вставляются в нужные места сетки. Теперь попробуйте сверстать это DIVами с помощью display:table. Придется же основное содержимое заворачивать в другие дивы просто для того чтобы расставить все по местам. А в CSS будет display:table-row, display:table-cell, display:table-column — попробуй разберись какой ряд и ячейка.

С динамической сменой местоположения блока тоже не вижу никаких проблем. А вообще, никто же не забирает у вас старые свойства CSS, используйте их там где это будет целесообразней.
Руки оторвать тому кодеру, который такой примитивный пример придумал сделать на гридах.
Баян.
Но что-то мне кажется, после этих наворотов будет только хуже.
Да не, все нафиг пошлют все эти вые**ны и будут верстать так, как проще. А это уж никак не «сетками».
Хз, хз. Если это действительно позволит отделить логическую и семантическую разметку от представления, то вполне можно ожидать вообще изменение сценариев над сайтами, в частности функцию верстальщиков, которые будут получать на входе HTML-разметку (все эти семантические плюшки HTML5) и «картинку», а и их задачей будет сделать только CSS. Не нужно будет никаких врапперов, не будет иметь значение порядок блоков и т. п. В общем то, что пытались сделать с помощью XML+XSLT=XSL-FO
Для статических страниц может это и будет работать, а вот для интерфейсов…

Интерфейсы DOM для управления контентом HTML в разы лучше и удобнее чем CSSOM. В текущем стандарте придется реализовать парсер CSS на JS, чтобы нормально управлять отображением только через CSS, а это немного дороговатое удовольствие во всех смыслах
Никто не говорит про управление только CCS'ом — если нам нужен узел, которого нет в изначальном документе, то естественно обратимся к DOM чтобы его создать. И задавать CSS свойства динамически через DOM никто не запрещает. Но вот решил пользователь сменить раскладку виджетов на своей дашборде с 5х3 на 3х5. По-моему описанными методами это сделать намного проще, чем в CSS2.1 — заменить одной строчкой JS display: 'abcde' 'fghij' 'klmno' на display: 'abc' 'def' 'ghi' 'jkl' 'mno' разве не проще чем, скажем убирать float:none в трех местах и ставить их в пяти или создавать два tr и раскидывать между ними td по новой?
А пока нас впереди ждет лишь мучительный переход от того, что есть, к тому, что задумано.
Неужели хотят css-ом описать все полеты дизайнерской мысли, мне почему-то кажется что это не лучшее решение, всего все равно не предусмотришь, и приведет это в итоге к многомегобайтным спецификациям и тормозным браузерам (а может быть уже привело :)). Имхо всегда можно решить сложные задачи с помощью JS, а с типичными и нынешний css вполне справляется.
Плохо он справляется, чтоб далеко не ходить нажмите Ctrl+U и увидите в частности
<div id="wrapper">
<div id="inner" >

или

<div class="live bloginfo"> 
 
	<div class="bg-bott-r"><!-- for bottom rounded corners --> 
	<div class="bg-bott-l"> 
...
	</div> 
	</div><!-- // for bottom rounded corners --> 

Что-то мне подсказывает, что к логической структуре этой страницы эти теги отношения не имеют
Скажем, такие простые вещи как колонки очень геморно делаются с помощью JS, потому как много подводных гитик. И это очень востребованная и типичная вещь в эпоху широких, но невысоких мониторов.
Приписку на сайте нужно выводить «Для лучшего отображения контента поверните монитор на 90°» :D
До текущего момента мы делали её, используя плавающие блоки, относительные позиции и трюки с отрицательными отступами, и всё это было сложно реализовать, чтобы результат был похож на стандартную двух- или трехколоночную разметку

Бред сивой кобылы.

1-я колонка
2-я колонка
3-я колонка

и что сложного?
Во всем этом светлом будущем лично пугает только одно — 10% пользователей ie6 (ie7, ie8 — неважно), браузер которых вообще не отобразит мою супер-бупер красивую страничку, сверстанную по html5. А поэтому либо делаем все по-старому (так и будет еще долго во всех коммерческих проектах), либо с костылями для не поддерживающих браузеров (ой как геморно).
Да, я граммар-полис, минусуйте. Но всё-таки, раздери меня гром:

> среди них является (как не удивительно) Internet Explorer
Как НИ удивительно.
дело не в граммар-полис. дело в том, что для таких вопросов есть личные сообщения.
Окей, спасибо за подсказку.
div {
display: grid;
grid-columns: 1fr 3fr 1fr;
grid-rows: 100px auto 12em;
}


WPF -> Grid -> (Row)ColumnDefinitions -> Такой сахорок мне по душе! Надеюсь реализуется.
Полезная-таки подборка. Уже давно не слежу за новыми фичами CSS. Интересно, как IE ввязывается в «процесс»)
непонятно что делать с flexbox, с одной стороны вроде бы можно пользоваться благодаря скрипту flexie, с другой стороны спека флексбокса уже поменялась на новую
А для ИЕ6 плагин для поддержки этого всего будет? ;)
Основная причина, по которой я не использую новые возможности, это необходимость для поддержки браузеров, не использующих новые технологии, писать дополнительный код в документе.

Пример.
Когда упрямый заказчик хочет тень текста и в IE тоже, то какой смысл в text-shadow… Всё равно придётся текст вставлять дважды. А потом объяснять ему, почему невозможно изменить его из админки CMS или, плеваясь, прикручивать js, который будет это делать.
Sign up to leave a comment.

Articles