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

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

07.08.2022

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

Яндеховости

flat file cms

Полезняшки

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 - развитие темы.

гамбургер и тизер-енд

<!-- ☰-->
<!-- TEASER_END: Читать дальше -->

подгонка контента под размер окна

main {
  min-height: calc(100vh - 2em);
}

https://baradusov.ru/posts/2018/math-and-frontend - css-трюки в некотором количестве.

перенаправление - html meta

Откуда-то давно прихвачено

<!-- remove the following three lines to stop redirecting to the help page
<meta http-equiv="refresh" content="1;url=/help/" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache"> -->

css-диагональка

background-image: linear-gradient(to top right, transparent 45%, #fff, transparent 54%)

картинки для сайта


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

Задонатить.


An IndieWeb Webring 🕸💍