Подписывайся на Telegram-канал

Полезные приёмы в CSS

Полезные приёмы в CSS

https://t.me/it_programmist

Обрезаем текст и ставим многоточие

Бывает нужно обрезать текст в ограниченный по высоте или ширине блок.

Всё это делается просто и только с помощью CSS

div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Но будь аккуратен, потому что могут случиться казусы вроде такого https://t.me/progerdiary/72

Использование calc()

С помощью calc можно складывать, вычитать, делить умножать величины в различных единицы измерения, например, чтобы в данной разметке

<div class="container>
  <aside>....</aside>
</div>

сделать aside размером в треть ширины контейнера нужно сделать так

aside {
width:{100% / 3}
}

Выравнивание по вертикали

Раньше было возможно при использовании display:table и display:table-cell или с помощью назначения элементу display:inline-block и использования vertical-align: middle.

Но у нас есть flex!

Родителю display:flex и align-items:center

Для grid примерно та же история, но grid я хочу вынести в отдельную статью, поэтому тут мы остановимся на flex.

Выделить внешние ссылки

Тут есть важная оговорка. Внутренние ссылки должны иметь атрибут href вида href='/section/page', то есть без протокола и доменного имени.

В таком случае ссылки на внешние сайты можно в css выделить так

a[href^="http"], a[href^="https"]:before{
content:'⇒'
}

Прибить футер к низу страницы

Сейчас, в эпоху страниц-простыней и мобильных устройств, этот вопрос стоит не так остро, как ещё пару лет назад, однако на страницах с малым количеством информации может получиться некрасиво. Да и многие по старинке делают так чтобы футер "прижимался к низу страницы"

Разметка

<html>
 <body>
  <main></main>
  <footer></footer>
 </body>
</html>

Стили

html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
main {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
}

Самый смак в том, что нам, что нам не важна высота футера. 

Выравнивание изображения

С этими изображениями вечно что-то не так, если задать высоту и ширину жестко, то они меняют пропорции и искажаются. Если оставить только ширину, то у вертикальных фото может оказаться просто огромная высота. Если оставить только высоту, то фотка может вылазить за пределы экрана. Если в последних двух случаях задать контейнеру overflow:hidden, то, скорее всего, фотка будет плохо обрезаться.

Можно задать картинку с помощью backround-image прямо в разметке, то есть

<img src="/path/to/img.jpg" />

заменить на

<div class="image" style="background-image:'/path/to/img.jpg'"> </div>

А в css

.image{
height:200px;
background-size: cover;
background-position: 50% 50%;
}

___________

Я - программист!

Шутеечки в Дневнике программиста

Чат Клуб программистов

Ещё