Все разговорные языки основаны на различных паузах. Короткие промежутки между словами, фразами и предложениями настолько же важны для понимания значения, как и сами слова. Паузы представляют собой звуковые эквиваленты полей в том смысле, что и те и другие служат для отделения элемента от окружающего его содержимого. В CSS для введения пауз в документ могут применяться три свойства:
pause-before, pause-after и pause.
Формат <время> позволяет задать длительность паузы в секундах или миллисекундах. Допустим, требуется вставить полную двухсекундную паузу после элемента h1. Это можно обеспечить любым из двух следующих правил:
h1 {pause-after: 2s;}
h1 {pause-after: 2000ms;} /* продолжительность, аналогичная '2s' */
С процентными значениями все немного сложнее, поскольку они вычисляются относительно заданного значения speech-rate. Давайте посмотрим, как это происходит. Во-первых, рассмотрим следующее:
h1 {speech-rate: 180;}
Это значит, что любой элемент h1 будет воспроизводиться со скоростью примерно три слова в секунду. Теперь рассмотрим:
h1 {speech-rate: 180; pause-before: 200%;}
Это процентное значение вычисляется на основании средней длины слова. В данном случае произнесение одного слова занимает 333,33 миллисекунды, так что 200% от этого значения составляет 666,66 миллисекунды. Скажем по-другому: каждому h1 будут предшествовать паузы продолжительностью в две трети секунды. Если изменить правило так, что значение speech-rate будет равно 120, пауза будет длиться целую секунду.
Свойство pause – это сокращенная форма записи, которая объединяет pause-before и pause-after.
Если задается только одно значение, оно определяет продолжительность паузы и перед элементом, и после него. Если указывается два значения, тогда первое определяет паузу перед элементом, а второе – паузу после него. Таким образом, следующие правила эквивалентны:
pre {pause: 1s;}
pre {pause: 1s 1s;}
pre {pause-before: 1s; pause-after: 1s;}