Помогите с переводом

[Йцукен]

Пытаюсь освоить CSS читая учебник на сайте htmldog.com (лично мне он ,пока что, кажется наиболее доступным для начинающих) и попутно освежаю в памяти знание английского. Больше половины курса уже позади, но вот сейчас понял, что без помощи специалистов в некоторых моментах мне одному не разобраться, поэтому прошу помочь с переводом вот этого фрагмента:

 

OK. So that was the basics. Now for something a little more advanced and rarely used…

Perhaps the best way to understand the table-related display property values is to think of HTML tables. table is the initial display and you can mimic the tr and td elements with the table-row and table-cell property values respectively.

The display property goes further by offering table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption as values, which are all quite self-descriptive. The immediately obvious benefit of these values is that you can construct a table by columns, rather than the row-biased method used in HTML.

Finally, the value inline-table basically sets the table without line breaks before and after it.

Be careful when using these values. Older browsers struggle with them and getting carried away with CSS tables can seriously damage your accessibility. HTML should be used to convey meaning, so if you have tabular data it should be arranged in HTML tables. Using CSS tables exclusively could result in a mash of data that is completely unreadable without the CSS. Bad. And not in a Michael Jackson way.

.. так, чтобы по смыслу перевод не был далеко от оригинала.

Спасибо.

[xzarxzes]

Пытаюсь освоить CSS читая учебник на сайте htmldog.com (лично мне он ,пока что, кажется наиболее доступным для начинающих) и попутно освежаю в памяти знание английского. Больше половины курса уже позади, но вот сейчас понял, что без помощи специалистов в некоторых моментах мне одному не разобраться, поэтому прошу помочь с переводом вот этого фрагмента:

 

OK. So that was the basics. Now for something a little more advanced and rarely used…

Perhaps the best way to understand the table-related display property values is to think of HTML tables. table is the initial display and you can mimic the tr and td elements with the table-row and table-cell property values respectively.

The display property goes further by offering table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption as values, which are all quite self-descriptive. The immediately obvious benefit of these values is that you can construct a table by columns, rather than the row-biased method used in HTML.

Finally, the value inline-table basically sets the table without line breaks before and after it.

Be careful when using these values. Older browsers struggle with them and getting carried away with CSS tables can seriously damage your accessibility. HTML should be used to convey meaning, so if you have tabular data it should be arranged in HTML tables. Using CSS tables exclusively could result in a mash of data that is completely unreadable without the CSS. Bad. And not in a Michael Jackson way.

.. так, чтобы по смыслу перевод не был далеко от оригинала.

Спасибо.

 

Я бы так перевл:

 

Хорошо. Это были основы. Теперь возьмемся за что то более продвинутое и редко используемое...

Возможно лучший способ понять значения совйства дисплэй, относящихся к таблицам (dispaly: table-cell итд), это думать о таблице в HTML. Тэйбл это изначальный дисплей (здесь речь о том что display: table задается родителю, контейнеру) и вы можете имитировать поведение элментов tr и td использую значения свойства table-row и table-cell соответственно.

Свойство дисплей идет дальше, давая вам возможность использовать table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption в качестве значений, названия которых говорят сами за себя. Сразу становится очивидно приемущество этих значений, вы можете сконструровать таблицы по колонкам, нежели использовать строчный метод к которому привыкли в HTML.

Наконец, значение инлайн тэйбл по существу, не создает до и псоле себя, переводов строк.

Бедьте осторожны используя эти значения. Старые версии браузеров не очень их переваривают и если вы будете злоупотребляь ими(тэйблами), это нанесет вред общедоступности(для скринридеров итд). HTML должен использоваться для передачи смысла(семантично), так что если у вас есть какие то данные которые подходят на роль табличных данный, то для этой цели подойдет таблица HTML. Ипользуя исключительно таблицы создаст мешанину в результате, и сделает ваши данный абсолютно не читаемыми если отключить css. Это плохно и совсем не в стиле майкла джэксона.

 

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

Edited September 22, 2014 by xzarxzes

[Great Rash]

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

В этом куске текста идёт речь о том как эмулировать таблицу, используя CSS. Именно поэтому в конце используется термин "CSS tables" (CSS-таблицы), и автор там совершенно справедливо замечает, что табличные данные верстают дивами только маглы.

[mishka]

и автор там совершенно справедливо замечает, что табличные данные верстают дивами только маглы.

Не стоит так категорично. Если по дизайну на широком экране табличка, а на узком какй-нибудь опенклоуз, то нормально дивами эмулировать табличку.

[Great Rash]

Если по дизайну на широком экране табличка, а на узком какй-нибудь опенклоуз, то нормально дивами эмулировать табличку.

А не правильней ли будет в данном случае сделать два элемента и показывать один из них в зависимости от размера устройства? 

[sigma77]

А не правильней ли будет в данном случае сделать два элемента и показывать один из них в зависимости от размера устройства? 

ИМХО, не правильней. Зачем дублировать лишний раз данные? Это 1) лишний трафик (пусть и не большой), 2) нужно поддерживать в актуальном состоянии оба элемента (что уже лишняя работа для разработчика).

[SelenIT]

и автор там совершенно справедливо замечает, что табличные данные верстают дивами только маглы.

Не стоит так категорично. Если по дизайну на широком экране табличка, а на узком какй-нибудь опенклоуз, то нормально дивами эмулировать табличку.

 

Так одно другому не противоречит. Если это только представление для одного из вариантов дизайна, то эти данные не такие уж и табличные. А если нужда заставит, для маленьких экранов можно и td { display:block; } задать с сопутствующими украшательствами (а-ля пример №3), мобильные браузеры поймут.

 

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

[Great Rash]

У флексбоксов только есть 2 серьёзных проблемы:

1) они довольно сложны в понимании, синтаксис у них перегружен (я вот без документации перед глазами по памяти не напишу разметку флексами)

2) заколебёшься префиксы рисовать, если надо кроссбраузерно (особенно какой-нить Android 2.3, где синтаксис в принципе другой)

[SelenIT]

Префиксы фтопку. Есть только одни флексбоксы - последние, они же стандартные. Для старья в 99% случаев как раз прокатит фолбэк на CSS-таблицы/инлайн-блоки/флоаты, будет и проще, и быстрее

[Sergik+]

Префиксы фтопку. Есть только одни флексбоксы - последние, они же стандартные . Для старья в 99% случаев как раз прокатит фолбэк на CSS-таблицы/инлайн-блоки/флоаты, будет и проще, и быстрее

Я в пятницу общался с ребятами из яндекса они давно уже применяют флэксы, и даже Вадим Макеев сказал

что пришло время применять флэксбоксы.

[Great Rash]

и даже Вадим Макеев сказал что пришло время применять флэксбоксы.

Есть проекты на которых позырить можно вживую? У меня например требования ИЕ7+ (с деградацией), но я слабо представляю как можно красиво деградировать с флексов.

[Sergik+]

 

и даже Вадим Макеев сказал что пришло время применять флэксбоксы.

Есть проекты на которых позырить можно вживую? У меня например требования ИЕ7+ (с деградацией), но я слабо представляю как можно красиво деградировать с флексов.

 

Я задавал этот вопрос, ответ был таков что когда требуется старый ie используют display:table как хак.

Вадим Макеев сказал что использует в тех элементах где все не поплывет, например меню на всю ширину.

А где сейчас IE7 применяется если не секрет ?

Edited September 22, 2014 by Sergik+

[SelenIT]

Можно прогрессивно улучшаться до них. Например, есть старая реализация грида на инлайн-блоках/флоатах, с кучей сопутствующих хаков. Задаем контейнеру display:flex, и, если браузер его понимает, все хаки по волшебству становятся не нужны (для подстраховки можно подпереться @supports(flex-flow) {...}, как в моем старом примере, но необязательно).

 

Такой эволюционный переход на флексбоксы делает, в частности, проект Pure CSS Grids (наследник YUI CSS Grids). Сейчас там флексбоксы для вебкитов и IE10, но со следующего релиза (0.6) будет по умолчанию уже для всех.

[Great Rash]

А где сейчас IE7 применяется если не секрет ?

ИЕ7 применяется у 0.5% наших пользователей. Если учесть, что у нас количество пользователей измеряется миллионами, то 0.5% - это довольно большая цифра получается.

Например, есть старая реализация грида на инлайн-блоках/флоатах, с кучей сопутствующих хаков.

Сетка - это фигня, там флексы не особо нужны. А вот когда надо сделать прижатый футер например (без абсолютов, шоб резиновый был), тут как раз флексы отлично подходят, но как с них деградировать не могу представить. У таблицы высоту задавать нельзя, только скриптами получается, но ИЕ7 и без них тормозной, а тут ещё и на ресайз придётся вешать.

[Sergik+]

 

А где сейчас IE7 применяется если не секрет ?

ИЕ7 применяется у 0.5% наших пользователей. Если учесть, что у нас количество пользователей измеряется миллионами, то 0.5% - это довольно большая цифра получается.

 

Ну у вас видимо необходимо поддерживать.

[SelenIT]

У таблицы высоту задавать нельзя

Почему нельзя? Давным-давно я делал вот такой страшный изврат, как раз с таблицами для IE7-, конечно, мусор в разметке дикий, но в новых браузерах DOM чистая...

[Great Rash]

У такой разметки свой гемор имеется Абсолюты в ячейках таблицы не пашут. Но в целом это лучше чем ничего не спорю.

[SelenIT]

Вроде ж абсолюты в ячейках не пахали только в фоксе, и с прошлой версии это исправили?

[Great Rash]

Если так, то это отличная новость. Я не слежу за обновлениями фокса, так что упустил этот момент.