Размещение тега стиля в поле зрения - PullRequest
Новая
       6

Размещение тега стиля в поле зрения

3 голосов
/ 05 июня 2019

Глядя на некоторые виды Razor, я часто вижу, как тег <style> добавляется непосредственно в файл представления (CSHTML).

Кажется, это работает нормально, но на самом деле он добавляет тег <style> внутри тега <body>, тогда как обычно он должен быть внутри тега <head>.

Как бы вы встроили CSS в одну страницу бритвы, чтобы она отображалась внутри тега <head>? Есть ли предпочтительный способ?

Ответы [ 3 ]

1 голос
/ 05 июня 2019

Как это:

Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    ...
    @RenderSection("HeadStyles", required: false)
</head>
<body>
    ...
</body>
</html>

Home/Index.cshtml или любой другой вид, который вам нужен, чтобы сделать это в 

@section HeadStyles {
    <style>
        .custom-style { color: red; }
    </style>
}
1 голос
/ 05 июня 2019

Причина, по которой включение тегов <style> не рекомендуется внутри <body>, заключается в том, что они вызывают FOUC .

Но если ваш тег <style> применяется к контенту, который после в DOM, этот риск равен null.

Ни один браузер в настоящее время не имеет проблем с синтаксическим анализом тегов <style>, помещенных в <body>.
Технически, когда браузер встречает тег <style> в DOM, это:

  • рендеринг пауз
  • реконструирует CSSOM для включения новых объявлений
  • перестраивает уже отрисованный DOM (здесь происходит FOUC, если)
  • продолжает рендеринг
0 голосов
/ 05 июня 2019

лучший вариант - 

<html>
    <head>
        <link rel="stylesheet" href="styles.css">       
    </head>
    <body>
        <!-- here is page content -->             
        <script src="scripts.js" type="text/javascript"></script>
    </body>
</html>

в этом случае браузер будет загружаться в этой последовательности

  1. стили
  2. контент (который уже будет стилизован)
  3. скрипты (которые не замедляют рендеринг страницы, если скрипты не так уж и малы)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...