Цифровой садик - приветственная

Цифровой садик - приветственная | Полный список всего, что тут есть | Отправить сообщение через Яндекс.Форму | RSS | Подписаться через follow.it

21.01.2022

сайтодельство

Полезняшки

doctype-ы html 4, xhtml 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

html5 почти минимальный файл

Короткий doctype. Скриптам и стилям не надо лишних атрибутов. Кодировку тож попроще указывать.

<!DOCTYPE html>
<html lang=ru>
 <head>
  <meta charset="utf-8">
  <title>Пример страницы</title>
  <style>
  p { color:  navy; }
  </style>
 </head>
 <body>
  <p>Страница на HTML5</p>
 </body>
</html>

css, чёрный фон с прозрачностью 0.5

Пример позволяет ставить прозрачность, не задевая текст

background-color:rgba(0,0,0, 0.5);

font-display:swap, если надо грузить шрифты

How to avoid showing invisible text

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

The font-display API specifies how a font is displayed. swap tells the browser that text using the font should be displayed immediately using a system font. Once the custom font is ready, it replaces the system font. (See the Avoid invisible text during loading post for more information.)

https://web.dev/codelab-avoid-invisible-text - развитие темы.


Если у вас есть мысли, комментарии, предложения или отклики по поводу этой страницы или этого цифрового сада в целом, напишите мне сообщение через Яндекс.Форму или на agnessa@agnessa.pp.ru. Мне ооочень интересно!


An IndieWeb Webring 🕸💍