свойство CSS size

[rediskavet]

Почему ответственные за css не вводят новое свойство size, например вместо

DIV{
  width: 200px;
  height: 100px;
}

Можно было-бы написать

DIV{
  size: 200px 100px;
}

Каждый раз когда прописываю высоту и ширину, об этом вспоминаю. Ведь удобнее же?

Или есть подводные камни которые от меня скрыты?

Edited March 13, 2011 by rediskavet

[Serlutin]

Вводить новое свойство очень черевато. Просто потому что поддерживаться всеми без исключения браузерами оно будет только лет через 10. В итоге мы получили бы вот-такую запись:

DIV{
  width: 200px;
  height: 100px;
  -moz-size: 200px 100px;
  -webkit-size: 100px 200px;
  size: 200px 100px;  
}

И ради чего всё это? Тем более не стоит забывать, что CSS когда-то приходил на смену атрибутам. Поэтому и названия использовались те же самые, чтобы не запутаться.

[rediskavet]

Должна быть более веская причина. Т.к. следующая запись тоже длинная, но применяется гораздо реже, чем размеры блока.

DIV{
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
}

Кроме этого я считаю что в CSS 4 или CSS 3.1, появятся не прямоугольные блоки, с разными по длине противоположными сторонами. Тогда допустим треугольник можно будет задать при помощи следующей записи

DIV{
  size: 0 40px 80px;
}

вместо сегдняшних:

DIV{
border-bottom:80px solid #FFFFFF;
border-left:40px solid transparent;
border-right:40px solid transparent;
}

Edited March 13, 2011 by rediskavet

[Serlutin]

следующая запись тоже длинная, но применяется гораздо реже, чем размеры блока.

Уже много раз говорилось, почему производители браузеров стали так рьяно вводить закруглённые уголки и тени, вместо внедрение Flexbox и Template. Дело в том, что жить без круглых уголков можно, а вот каждый раз смотреть, в каком браузере не работает ширина - муторно. Вы не поверите, даже если бы сейчас все браузеры овладели этой функцией, то я вряд ли стал её пользоваться. Я вообще привык группировать width, min-width и max-width рядом, хоть где-то это считается и неправильным.

CSS 4 или CSS 3.1

CSS уже года 3, как отказался от версионности.

Вот эту запись, я совершенно не понял:

DIV{
  size: 0 40px 80px;
}

На счёт бордеров, мне более-менее понятно. Там всё сделано за счёт взаимодействие разных границ. Они соединяются между собой под уголом. Именно поэтому и получается треугольник (только надо ещё ширину и высоту = 0 поставить, иначе ужасы из школьной геометрии вновь вернутся)

Теперь смотрим на вашу запись.

Первое значение: ширина = 0

Второе значение: высота = 40px Только вот без ширины, блока нет. Хоть ему бесконечную высоту нарисовать.

Третье значение: длина? диагональ? = 80px. Явно треугольник не получается.

И ещё. Синтаксис CSS подразумевает, что каждое значение имеет своё название.

То есть

border-bottom:80px solid #FFFFFF;

Это border-bottom-width, border-bottom-style, border-bottom-color.

В случае с size придётся при необходимости придётся расписывать так? size-width и size-height? Практичности от такого нововведения будет 0

[rediskavet]

Теперь смотрим на вашу запись.

Первое значение: ширина = 0

Второе значение: высота = 40px Только вот без ширины, блока нет. Хоть ему бесконечную высоту нарисовать.

Третье значение: длина? диагональ? = 80px. Явно треугольник не получается.

Нет, я не это имел ввиду. Это сокращенная запись, должна работать аналогично:

margin: top right bottom left;

То есть:

DIV{
  size: top=0 right=40px bottom=80px left=40px;
}

По моему размер фигуры логичнее задавать через длину ее сторон, чем через бордеры. Ведь стороны у блока есть всегда, а бордер совсем не является обязательным.

[Serlutin]

Ведь стороны у блока есть всегда, а бордер совсем не является обязательным.

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

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

DIV{
  size: 0 40px 80px 40px;
}

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

Edited March 13, 2011 by Serlutin

[swetlana]

CSS имеет дело только с квадратами и прямоугольниками, у которых противоположные стороны равны и параллельны.

очень жаль.

[rediskavet]

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

Да, такой ответ принимается. Только не блочную структуру, а плавающую модель.

Хотя потребность в не квадратных блоках все же есть и будет. Как пример, диаграммы(круглые, которые на торт похожи), как их в разметку вставить?

[Serlutin]

очень жаль.

Да, пусть все браузеры квадраты начнут нормально обрабатывать.

Дело ведь в том, что просчитывать поведение нестандартных блоков очень сложно. Если два квадратных блока будут состыковаться без зазоров, то вот уже триугольник и круг состыковать не получится. Если уж так нужны круги и всяких там угольники есть SVG и canvas. В дизайне же можно и картинкой обойтись.

Edited March 13, 2011 by Serlutin

[swetlana]

Дизайнеры время от времени присылают макеты, на которых текст например круглую картинку обтекает.

Приходится заворачивать. Даже если выглядит уместно и красиво.

[Serlutin]

Эту проблему пытаются уже решить. Например CSS Regions (PDF) от Adobe.

Выглядит круто, но синтаксис, как всегда опять какой-то замудрённый и не понятно, когда ещё это начнёт поддерживаться. Как минимум лет 5 ждать.

Edited March 13, 2011 by Serlutin

[Int]

Нет, я не это имел ввиду. Это сокращенная запись, должна работать аналогично:

margin: top right bottom left;

То есть:

DIV{
  size: top=0 right=40px bottom=80px left=40px;
}

Это не треугольник, а отрезок. Потому что в треугольнике сумма длин двух сторон обязана быть больше длины третьей. У тебя выходит 80=80, то есть высота треугольника равна нулю => отрезок.

С такой матчастью негоже давать советы. Пусть компетентные люди решают, какие параметры вводить.

[rediskavet]

Это не треугольник, а отрезок. Потому что в треугольнике сумма длин двух сторон обязана быть больше длины третьей. У тебя выходит 80=80, то есть высота треугольника равна нулю => отрезок.

С такой матчастью негоже давать советы. Пусть компетентные люди решают, какие параметры вводить.

Да ты прав, это я для наглядности со вторым примером(про бордеры) длинны сторон выставил, и не обратил внимания что треугольник не получается.

Только я советов не давал, я мнение других спрашивал.

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

Edited March 14, 2011 by rediskavet

[SelenIT]

Имхо, потому что CSS всё-таки в первую очередь создан для HTML, а HTML — это поток. Поэтому все типы блоков в CSS по умолчанию созданы быть максимально гибкими. Ограничь ширину — содержимое будет "разливаться" в длину. А еще содержимое может быть динамическим, а еще юзер может в любой момент ВНЕЗАПНО111 изменить размер шрифта и т.п. Задача, в которой приходится одновременно задавать (точнее, жестко ограничивать) оба измерения блока — относительная редкость по сравнению с задачей вписывания произвольного блока в заданное пространство по одному измерению. Плюс динамика — что проще анимировать скриптом, размеры или, скажем, свойство clip, где как раз все края задаются сразу одной строкой? Поэтому и живут размеры по раздельности. Удобств от этого много, а выгода от объединения — разве что небольшое сокращение кода, но с этим и gzip неплохо справляется...

Вот возможность задавать непрямоугольные области была бы действительно кстати. Тем более в HTML она в каком-то смысле давно есть — в виде <area shape="poly">. А в CSS она становится особенно актуальной с приходом всяких трансформаций (а то несолидно как-то, когда блок повернут на 45°, а текст обтекает его по-прежнему как тупой квадрат)...

[Great Rash]

Хотя потребность в не квадратных блоках все же есть и будет. Как пример, диаграммы(круглые, которые на торт похожи), как их в разметку вставить?

Ващет для этого <canvas> и придумали...

[SelenIT]

Ващет для этого <canvas> и придумали...

Canvas бывает непрямоугольным? Сорри, можно пример?

[psywalker]

Canvas бывает непрямоугольным? Сорри, можно пример?

Нет, он то сам прямоугольный. Но его методы позволяют сделать например круглый шар.

[Great Rash]

Canvas бывает непрямоугольным? Сорри, можно пример?

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

[SelenIT]

В полиграфии еще не то встречается — напр., текст вокруг контура силуэта человека. Иногда дизайнеры и в веб такое тянут, приходится изворачиваться. Кстати, c inline-SVG это, случаем, изящно не решается?

[sigma77]

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

Ну не всегда нужно, чтобы обтекал. Иногда, например, нужно просто поместить текст в неквадратный элемент, чтобы он туда аккуратно вписывался

[psywalker]

В полиграфии еще не то встречается — напр., текст вокруг контура силуэта человека. Иногда дизайнеры и в веб такое тянут, приходится изворачиваться. Кстати, c inline-SVG это, случаем, изящно не решается?

SelenIT

Дружище, а ты случаем не знаешь решения, как сделать, чтобы текст обтекал например круглую поверхность? Только не используя для этого кучу дивов, как в примере.

[SelenIT]

Пока не знаю. Подозреваю, что на сегодня куча дивов — единственный практически применимый вариант...

[Int]

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

Не люблю комбинированные параметры, это не юникс-вей

[psywalker]

Пока не знаю. Подозреваю, что на сегодня куча дивов — единственный практически применимый вариант...

Понял. Жаль конечно же.