JSConf Iceland 2016

JSConf Iceland 2016

1.чтобы сделать всю статью кликабельной(ссылка) и при этом чтобы она имела другие вложенные ссылки  - используем тег <object>
ex. HTML:
      <a href="#1"> Some main text
        <object><a href="#2">Nested link</a></object>
      continuation of the main text</a>

    Browser parser reads it as:
      <a href="#1">Some main text</a>
      <a href="#2">Nested link</a>
      <a href="#1">continuation of the main text</a>
    
    
2.чтобы редактировать svg через css - используем тег object.
ex.
  <object type="image/svg+xml" data="image.svg">
   <!--fallback img with css -->
  </object>
  Ниже сожержимое svg файла:
  <?xml version="1.0" encoding="UTF-8"?>
  <?xml-stylesheet href="component.css" type="text/css"?>  -  Важно!здесь подключаем стили в svg!
  <svg xmlns="http://www.w3.org/2000/svg"> ... </svg>
  
3.Стилизуем иконку отсутствующей картинки.
Для загруженной картинки мы не можем применять псевдоэлементы,но для незагруженной - можем.
      img {
          min-height: 50px;
          position: relative;
      }
      img::before {
          content: "";
          display: block;
          position: absolute;
          top:-10px;
          left:0;
          width:100%;
          height: calc(100% + 10px);
          background-color: white;
      }
      img::after {
          content: "**" "This img is broken,sorry" attr(alt);
          display: block;
          font-size: 16px;
          color: #000;
          position: absolute;
          top: 5px;
          left: 0;
          width: 100%;
          text-align: center;
      } 
4.Адаптивный шрифт 

      font-size: calc(16px(A) + (24 - 16)(B) * (100vw - 400px)(C) / (800 - 400)(D));
      A - min font-size,
      B - max font-size - min font-size,
      C - min screen size,
      D - max screen size - min screen size
      
5. line-height: calc( 1.3em + (1.5 - 1.3)(A) * ((100vw - 21em) / (35 - 21)) );
      A - Разбег line-height max и min
      
6. Как в таблице сделать выделение колонки и ряда при hover на ряд/колонку
      просто делаем псевдоэлементы с отрицательным индексом и при hover меняем индекс на положительный. easy!
      
7. if the width value is greater than the max-width value, max-width wins.
   if th min-width value is greater the width or max-width values,then min-width wins.
   
8. Можно и для e-mail писем. в e-mail письмах только таблицы (но это не точно)
      .block {
      display: inline-block;
      min-width:50%;
      max-width:100%;
      width:calc((480px - 100%) * 480);
      //480 - is a breakpoint.(два варианта layout.2 блока в ширину до 480px и 4 блока после 480px)
      
9. Делаем паддинг у инлайнового элемента!
    h1 {
          display: inline;
          background: orange;
          box-shadow: 10px 0 0 orange, -10px 0 0 orange;
    }
    
10. Чтобы сделать div на всю ширину страницы внутри контейнера:
      .block {
            margin-left:calc(-50vw + 50%);
            margin-right:calc(-50vw + 50%);
      }
      НО!Есть БАГ,поэтому:
      html,body {
            overflow-x:hidden;
      }
      
11. Создаем контейнер без лишней вложенности
      .container {
          width:600px;
          padding-left: calc( (100vw - 600px) / 2);
          padding-right: calc( (100vw - 600px) / 2);
      }