>Zina: /* Селекторы */

2022-10-25T16:48:09Z

Селекторы

Нова сторінка

Касадные таблицы стилей.

== Селекторы ==

<source lang="css">
[class^=] – для части селектора с начала
[class*=] – в любой части
[class$=] – заканчивающиеся на...
</source>

После <code>=</code> писать часть селектора.
<br>Кавычки не обязательны.
<br>Вместо имени класса может быть ID.

* [https://learn.javascript.ru/css-selectors Знаете ли вы селекторы?]
* [https://code.tutsplus.com/ru/tutorials/the-30-css-selectors-you-must-memorize--net-16048 30 CSS селекторов, которые вы должны запомнить]
* [https://webref.ru/layout/advanced-html-css/complex-selectors Комплексные селекторы | WebReference]

== Инструменты ==

* [https://caniuse.com/ caniuse.com] — Support tables for HTML5, CSS3
* [https://browserdefaultstyles.com/ Browser Default Styles]

'''Калькулятор пропорционального изменения размера'''

* [https://scriptygoddess.com/resources/proportioncalc.htm Proportional Scale Calculator]
* [http://www.marsandmc.nl/internet/proportional_image_width_height_calculator.php Proportional image width height calculator] — дает список размеров с шагом в 1 или 10 пикселей
* [https://www.gieson.com/Library/projects/utilities/proportion_wheel/ Online Proportion Wheel] — показывает прямоугольники старого и нового размера

'''Critical CSS'''

* [https://web-standards.ru/articles/critical-css/ Извлекаем критический CSS] — Веб-стандарты
* [https://jonassebastianohlsson.com/criticalpathcssgenerator/ Critical Path CSS Generator]

'''Градиенты и тени'''

* [https://brumm.af/shadows Smooth shadow generator]
* [https://cssgradient.io/ CSS Gradient Generator]

'''Иконки'''

* [https://icomoon.io/app/#/select IcoMoon App] — создание набора SVG иконок

'''Картинки'''

* [https://responsivebreakpoints.com/ Responsive Image Breakpoints Generator]
* https://shrinkme.app — быстрая оптимизация картинок
* https://squoosh.app/ — тщательная оптимизация, включая конвертирование в WebP
* [https://jakearchibald.github.io/svgomg/ SVGOMG] — оптимизация SVG

'''Шрифты'''

* [https://meowni.ca/font-style-matcher/ Font style matcher] — сравнение стандартного и кастомного шрифта, чтобы добиться минимального FOUC
* [https://www.modularscale.com/?16&px&1.5 Modular Scale] — рассчет сетки размеров шрифтов, чтобы получить гармоничный вертикальный ритм
** в поле Bases меняется размер шрифта основного текста в пикселях,
** в поле Ratio — шаг, с которым увеличивается и уменьшается шрифт
* [https://github.com/filamentgroup/glyphhanger GlyphHanger] — оптимизирует шрифты, убирая неиспользуемые глифы, и создет WOFF и WOFF2 файлы для повышенной совместимости. [https://anatolykulikov.ru/review/glyphhanger-tool-to-optimize-fonts/ Описание на русском]

'''Спецсимволы'''

* [https://www.toptal.com/designers/htmlarrows/ HTML Arrows]
* [https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart]
* [https://www.typewolf.com/cheatsheet Typography Cheatsheet]

'''Анимация'''

* [https://easings.net/ru Шпаргалка функций плавности (easing)]
* [https://cubic-bezier.com/ Bezier curve generator]

'''Локальный сервер'''

* [https://ngrok.com/ ngrok - secure introspectable tunnels to localhost]

'''Соцсети'''

* [https://sharingbuttons.io/ Social Media Sharing Buttons] — No JavaScript. No tracking. Super fast and easy.

== blank-html5 ==

[https://github.com/huijing/blank-html5 huijing/blank-html5] — Blank HTML5 template for experiments and stuff — Gulp + SASS

<source lang="bash">
git clone https://github.com/huijing/blank-html5.git
cd blank-html5
npm install
</source>

== Картинки ==

* [http://scottjehl.github.io/picturefill/#using-type Picturefill]
** [https://webdesign.tutsplus.com/ru/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015 Как использовать HTML "picture" для адаптивных изображений]

== Таблицы ==

* [https://web-standards.ru/articles/sticky-table-header/ Липкая шапка таблицы на CSS]

== Выпадающее меню ==

* [https://dev.to/5t3ph/css-only-accessible-dropdown-navigation-menu-1f95 CSS-Only Accessible Dropdown Navigation Menu] — dev.to

== Методологии ==

* [https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ ITCSS: Scalable and Maintainable CSS Architecture]

== См. также ==

* [[Buttons]]
* [[Arrows]]
* [[Floating Label]]
* [https://learn.javascript.ru/css-units Единицы измерения: "px", "em", "rem" и другие]
* [http://png-pixel.com/ png-pixel.com] — Transparent PNG Pixel Base64 Encoded
* [http://www.dailycoding.com/Utils/Converter/ImageToBase64.aspx Online Image to Base64 Converter]
* [https://www.jackreichert.com/2011/07/how-to-add-a-divider-between-menu-items-in-css-using-only-one-selector/ How to add a divider between menu items in css using only one selector] - Jack Reichert
* [https://css-tricks.com/accessible-simple-responsive-tables/ Accessible, Simple, Responsive Tables | CSS-Tricks]
* [https://pustelto.com/blog/tools-i-use/ Tools I use for front-end dev - DEV Community 👩‍💻👨‍💻]

Категорія:CSS - Історія редагувань

>Zina: /* Селекторы */