Body sculpture вс-2920hko-h инструкция по эксплуатации онлайн [2/11]

stylelint rules that stylefmt can handle

stylefmt ️ stylelint

stylefmt supports the following stylelint rules:

  • at-rule-empty-line-before («always»|»never» and except «blockless-group» only)
  • at-rule-semicolon-newline-after
  • block-closing-brace-newline-after
  • block-closing-brace-newline-before
  • block-opening-brace-newline-after
  • block-opening-brace-newline-before
  • block-opening-brace-space-after
  • block-opening-brace-space-before
  • color-hex-case
  • color-hex-length
  • declaration-block-properties-order
  • declaration-colon-space-after
  • declaration-colon-space-before
  • declaration-empty-line-before
  • indentation
  • length-zero-no-unit
  • number-leading-zero
  • number-no-trailing-zeros
  • selector-combinator-space-after
  • selector-combinator-space-before
  • selector-list-comma-newline-after
  • selector-list-comma-newline-before
  • selector-list-comma-space-after
  • selector-list-comma-space-before
  • shorthand-property-no-redundant-values
  • string-quotes

and we can also format from the other stylelint’s configration files or packages (e.g. stylelint-config-standard, stylelint-config-suitcss and so on) using property.

Default formatting rules (without stylelint config file)

Basic

  • 2 spaces indentation
  • require 1 space between a simple selector and combinator
  • require 1 space between selectors and
  • require new line after
  • disallow any spaces between property and
  • require 1 space between and values
  • require new line after declarations
  • require in last declaration
  • require 1 space between values and
  • disallow any spaces between and
  • leave 1 blank line between rules
  • leave 1 blank line between rules in atrules
  • disallow any blank lines between

SCSS

  • require 1 space between and mixin name
  • require 1 space between mixin name and
  • require 1 space between and base rules
  • require 1 space between and mixin name
  • disallow any spaces between and
  • require 1 space between and name of variable

How To Use loadCSS (Recommended example)

loadCSS is designed to help load CSS files that are not critical to the initial rendering of the page, and instead desirable to load in an asynchronous manner. ()

For each CSS file you’d like to load asynchronously, use a element like this:

link rel="preload" href="path/to/mystylesheet.css" as="style">

In browsers that support it, the attribute will cause the browser to fetch the stylesheet, but it will not apply the CSS once it is loaded (it merely fetches it). To address this, we recommend using an attribute on the that will apply the CSS when it finishes loading.

link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">

This step requires JavaScript to be enabled, so we recommend including an ordinary reference to your stylesheet inside a element as a fallback.

link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
noscript>link rel="stylesheet" href="path/to/mystylesheet.css">noscript>

We also recommend ing the onload handler once it is used, since some browsers will occasionally re-call the handler upon switching the rel attribute to :

link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
noscript>link rel="stylesheet" href="path/to/mystylesheet.css">noscript>

After linking to your asynchronous stylesheet(s) this way, include the the loadCSS rel=preload polyfill script in your page. This file should be inlined or linked with http/2 server-push (a simple external script ).
Here’s how they would look inlined in the page:

link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
noscript>link rel="stylesheet" href="path/to/mystylesheet.css">noscript>
script>
/*! loadCSS rel=preload polyfill. 2017 Filament Group, Inc. MIT License */
(function(){ ... }());
script>

By including this script (which became standalone and no longer dependent on loadCSS.js as of version 2.0) will automatically detect if a browser supports . In browsers that natively support , the script will do nothing, allowing the browser to load and apply the asynchronous CSS (note the attribute above, which is there to set the ‘s attribute to stylesheet once it finishes loading).

In browsers that do not support , the script will apply a workaround (by temporarily manipulating the media attribute) to ensure that the file loads and applies asynchronously. It will also continue at a short interval to look for link elements in the DOM that need to be polyfilled. This means that the script will work from any location in the DOM (before or after the preload link(s)), but we do recommend placing the script immediately after all preload links for best performance.

Note: regardless of whether the browser supports or not, the original link element in the source will be used to fetch and apply the stylesheet. Keep this in mind, as you may want to place the in a particular location in your element so that the CSS loads with an expected cascade order. As you’d expect, any attribute present on the original link element will be retained when the polyfill is in play. When the polyfill has asynchronously loaded, it will be enabled immediately.

Способы асинхронной загрузки CSS

Существует несколько способов заставить браузер загружать CSS асинхронно.

Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:

// Создаем ссылку на таблицу стилей
var myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// вставляем ее в конце блока head
document.head.insertBefore( myCSS, document.head.childNodes.nextSibling );

Второй способ заключается в том, чтобы задать  атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».

В результате браузеры будут воспринимать стили для неиспользуемых устройств как низкоприоритетные. Поэтому они будут загружать стили, не блокируя рендеринг страницы.

Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:

Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.

Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:

Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.

More Information

  • Chrome Platform Status
  • Example
  • API
  • Explainer
  • Intent to Implement
  • Intent to Ship
  • Discourse

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had the information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had accurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was easy to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

No

What was the worst thing about this page?

It didn’t help me complete my goal(s)

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was missing information I needed

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It had inaccurate information

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

It was hard to read

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

Something else

Thank you for the feedback. If you have specific ideas on how to improve this page, please
create an issue.

rss_feed
Subscribe to our
RSS or
Atom feed
and get the latest updates in your favorite feed reader!

Using Constructed StyleSheets

The second new feature introduced by Constructable StyleSheets is an

property available on Shadow
Roots
and Documents. This
lets us explicitly apply the styles defined by a CSSStyleSheet to a given DOM
subtree. To do so, we set the property to an array of one or more stylesheets to
apply to that element.

Notice that we’re overriding the value of instead of
changing the array in place. This is required because the array is frozen;
in-place mutations like throw an exception, so we have to assign a new
array. To preserve any existing StyleSheets added via , we
can use concat to create a new array that includes the existing sheets as well
as additional ones to add:

Why loadCSS?

Referencing CSS stylesheets with or causes browsers to delay page rendering while a stylesheet loads. When loading stylesheets that are not critical to the initial rendering of a page, this blocking behavior is undesirable. The new standard enables us to load stylesheets asynchronously, without blocking rendering, and loadCSS provides a JavaScript polyfill for that feature to allow it to work across browsers. Additionally, loadCSS offers a separate (and optional) JavaScript function for loading stylesheets dynamically.

  • Latest release: https://github.com/filamentgroup/loadCSS/releases

Function API

If you’re including and calling the loadCSS function (without the pattern), the function has 3 optional arguments.

before: By default, loadCSS attempts to inject the stylesheet link after all CSS and JS in the page. However, if you desire a more specific location in your document, such as before a particular stylesheet link, you can use the before argument to specify a particular element to use as an insertion point. Your stylesheet will be inserted before the element you specify. For example, here’s how that can be done by simply applying an id attribute to your script.

head>
...
script id="loadcss">
  // load a CSS file just before the script element containing this code
  loadCSS( "path/to/mystylesheet.css", document.getElementById("loadcss") );
script>
...
head>
  • : You can optionally pass a string to the media argument to set the of the stylesheet — the default value is .
  • : You can also optionally pass an Object of attribute name/attribute value pairs to set on the stylesheet. This can be used to specify Subresource Integrity attributes:
loadCSS( 
  "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
  null,
  null,
  {
    "crossorigin" "anonymous",
    "integrity" "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  }
);

Using with

Onload event support for elements is spotty in some browsers, so if you need to add an onload callback, include function on your page and use the function:

var stylesheet = loadCSS( "path/to/mystylesheet.css" );
onloadCSS( stylesheet, function() {
	console.log( "Stylesheet has loaded." );
});

Browser Support

loadCSS attempts to load a css file asynchronously in any JavaScript-capable browser. However, some older browsers such as Internet Explorer 8 and older will block rendering while the stylesheet is loading. This merely means that the stylesheet will load as if you referenced it with an ordinary link element.

Contributions and bug fixes

Both are very much appreciated — especially bug fixes. As for contributions, the goals of this project are to keep things very simple and utilitarian, so if we don’t accept a feature addition, it’s not necessarily because it’s a bad idea. It just may not meet the goals of the project. Thanks!

Manual CSS loading with loadCSS

The loadCSS.js file exposes a global function that you can call to load CSS files programmatically, if needed. This file is no longer part of the loadCSS primary recommended workflow (which is purely a rel=preload polyfill), but it’s handy for cases where you need to dynamically load CSS from script.

loadCSS( "path/to/mystylesheet.css" );

The code above will insert a new CSS stylesheet after the last stylesheet or script that it finds in the page, and the function will return a reference to that element, should you want to reference it later in your script. Multiple calls to loadCSS will reference CSS files in the order they are called, but keep in mind that they may finish loading in a different order than they were called.

Атрибуты

HREF

Наличие этого атрибута является обязательным. Если он отсутствует или имеет значение, которое не является допустимым URI, элемент не определяет ссылку.

Пример

CROSSORIGIN

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения (без учета регистра):

  • anonymous: CORS запросы к элементу будут содержать установленный флаг «omit credentials«;
  • use-credentials: CORS запросы к элементу не будут содержать установленный флаг «omit credentials«.

Пример

REL

Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа (содержащего ссылку).

Элемент link должен содержать либо атрибут rel, либо атрибут itemprop, но не оба сразу. Атрибут href также является обязательным.

Пример

MEDIA

Список медиа-запросов с указанием типов медиа (и их характеристик), для которых предназначен связанный ссылкой ресурс. Например, документ или ресурс может быть оптимизирован для печати (меньше цветов, изображений и фоновых тонов), под мобильные устройства или обычные экраны. Значение по умолчанию -«all«.

Пример

HREFLANG

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе (указан в атрибуте HREF).

Пример

Тип контента (или Internet Media Type), который должен содержать связанный ресурс.

Пример

SIZES

Разделенный пробелами список с размерами иконки ссылки. Каждый размер может состоять из двух целых чисел, разделенных буквой «х«, или из специального ключевого слова «any«, представляющего все возможные размеры. Каждое значение чувствительно к регистру.

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение «icon«. Иначе ситуации его использование является недействительным.

Пример

CHARSET

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type, чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Пример

REV

Значение текущего документа (содержащего ссылку) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel.

Пример

Данная публикация представляет собой перевод статьи «LINK ELEMENT» , подготовленной дружной командой проекта Интернет-технологии.ру

Examples

Future CSS syntax (cssnext)

Input (input.css):

/* custom properties */
:root{--fontSize: 1rem;
  --mainColor       :#12345678;
--highlightColor:hwb(190, 35%, 20%);
}

/* custom media queries */
@custom-media

--viewport-medium(widthfont-size:var(--fontSize);
 line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px)}

/* custom media query usage */
@media (--viewport-medium) {
body {font-size: calc(var(--fontSize) * 1.2); }
}

/* custom selectors */
@custom-selector :--heading h1,h2,h3,    h4,h5,h6;
:--heading { margin-top: }

/* colors stuff */
a{
color:var(--highlightColor);
    transition:color 1s;
}
a:hover{color  :gray(255,50%) }
a:active{color : rebeccapurple }
a:any-link { color:color(var(--highlightColor) blackness(+20%)) }

/* font stuff */
h2 {font-variant-caps:small-caps;
}table{font-variant-numeric: lining-nums;
}

/* filters */
.blur{filter:blur(4px)}.sepia{
filter: sepia(.8);}

Yield:

/* custom properties */
:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --highlightColor: hwb(190, 35%, 20%);
}

/* custom media queries */
@custom-media --viewport-medium (width /* some var() & calc() */
body {
  color: var(--mainColor);
  font-size: var(--fontSize);
  line-height: calc(var(--fontSize) * 1.5);
  padding: calc((var(--fontSize)  2) + 1px);
}

/* custom media query usage */
@media (--viewport-medium) {
  body {
    font-size: calc(var(--fontSize) * 1.2);
  }
}

/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--heading {
  margin-top: ;
}

/* colors stuff */
a {
  color: var(--highlightColor);
  transition: color 1s;
}

a:hover {
  color: gray(255, 50%);
}

a:active {
  color: rebeccapurple;
}

a:any-link {
  color: color(var(--highlightColor) blackness(+20%));
}

/* font stuff */
h2 {
  font-variant-caps: small-caps;
}

table {
  font-variant-numeric: lining-nums;
}

/* filters */
.blur {
  filter: blur(4px);
}

.sepia {
  filter: sepia(.8);
}

SCSS syntax

Input (input.scss):

// mixin for clearfix


        @mixin      clearfix    ()      { &:before,
  &:after {
                content:" ";
    display              : table;  }

  &:after        {clear: both;}
   }.class
{
       padding:10px;@include        clearfix();}
     .base {  color: red;  }

// placeholder
%base
{


padding: 12px
}

.foo{
@extend      .base;}

.bar
      {     @extend            %base;

}

Yield:

// mixin for clearfix
@mixin clearfix () {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

.class {
  padding: 10px;
  @include clearfix();
}

.base {
  color: red;
}

// placeholder
%base {
  padding: 12px;
}

.foo {
  @extend .base;
}

.bar {
  @extend %base;
}
Ссылка на основную публикацию