Семантическая разметка для адаптивных докблоков - PullRequest
Новая
       39

Семантическая разметка для адаптивных докблоков

0 голосов
/ 21 марта 2012

Я работаю над некоторыми кодексами, такими как документация здесь , и я хочу написать разметку так, чтобы она выглядела как докблок Например: 

@param   string    lastName     the last name of the person

@param   string    firstName    the first name of the person

@return  string

Я пытаюсь выяснить, какие наиболее семантические элементы использовать (например, pre или dl или table или комбинацию div и span), и я также хочу сделать это отзывчиво, так что на маленьких экранах через CSS это будет выглядеть так: 

@param   
string    
lastName     
the last name of the person

@param
string
firstName
the first name of the person

@return
string

Я использовал 2 решения для этого раньше. Первый использует pre, у которого есть некоторые теги br, которые установлены на display:none выше определенной точки останова. Другой использует table и медиа-запрос, такой как: 

@media all and (max-width:640px) {
    table,thead,tbody,tfoot,th,td,tr{display:block}
    tr+tr{margin-top:1em}
}

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

1 Ответ

0 голосов
/ 21 марта 2012

После дополнительных экспериментов разметка, подобная этой IMO, является лучшим гибридом семантической + отзывчивой + кросс-браузерной совместимости.Это дает вам большую гибкость CSS: 

<dl>
  <dt><b>@param</b> <em>string</em> <strong>first</strong></dt>
  <dd>is the first name</dd>
</dl>
<dl>
  <dt><b>@param</b> <em>string</em> <strong>last</strong></dt>
  <dd>is the last name</dd>
</dl>
<dl>
  <dt><b>@return</b> <em>string</em></dt>
  <dd></dd>
</dl>

с CSS как: 

dt,dd {display:inline-block;*display:inline;margin:.5em 0}
dd {margin-left:1em}
...