Каковы рекомендации для html < base > тег?

  1. StaticResource использует первое значение. DynamicResource использует последнее значение.
  2. DynamicResource может использоваться для вложенного стиля, StaticResource не может.

Предположим, что у вас есть этот вложенный словарь стиля. LightGreen находится на корневом уровне, а Pink - внутри Grid.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type Grid}">
        <Style.Resources>
            <Style TargetType="{x:Type Button}" x:Key="ConflictButton">
                <Setter Property="Background" Value="Pink"/>
            </Style>
        </Style.Resources>
    </Style>
    <Style TargetType="{x:Type Button}" x:Key="ConflictButton">
        <Setter Property="Background" Value="LightGreen"/>
    </Style>
</ResourceDictionary>

В поле зрения:

<Window x:Class="WpfStyleDemo.ConflictingStyleWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ConflictingStyleWindow" Height="100" Width="100">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles/ConflictingStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Button Style="{DynamicResource ConflictButton}" Content="Test"/>
    </Grid>
</Window>

StaticResource отобразит кнопку как LightGreen, первое найденное значение в стиле. DynamicResource будет переопределять кнопку LightGreen как розовую, если она отображает сетку.

StaticResource [/g0] StaticResource

DynamicResource [/g1] DynamicResource

Имейте в виду, что VS Designer рассматривает DynamicResource как StaticResource. Он получит первое значение. В этом случае VS Designer будет отображать кнопку LightGreen, хотя на самом деле она заканчивается как Pink.

StaticResource выдает ошибку при удалении стиля корневого уровня (LightGreen).

446
задан 19 revs, 10 users 47% 3 October 2017 в 07:50
поделиться

6 ответов

Анализ эффектов базового тега:

Базовый тег, похоже, имеет некоторые неинтуитивные эффекты, и я рекомендую знать результаты и проверить их самостоятельно, прежде чем полагаться на <база> ! Поскольку я обнаружил их после , пытаясь использовать базовый тег для работы с локальными сайтами с разными URL-адресами, и обнаружил проблемные эффекты только после этого, к моему разочарованию, я чувствую себя обязанным составить это резюме этих потенциальных ловушек. для других.

Я буду использовать базовый тег: в качестве моего примера в приведенных ниже случаях, и будет делать вид, что страница с кодом http://localsite.com/original-subdirectory

Major: The base tag makes everything link differently, including same-page anchor links to the base tag's url instead, e.g:

With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.

Minor:

IE6 fix that requires conditional comments: Requires conditional comments for ie6 to avoid screwing up the dom hierarchy, i.e. as BalusC mentions in his answer above.

So overall, the major problem makes use tricky unless you have full editing control over every link, and as I originally feared, that makes it more trouble than it's worth. Now I have to go off and rewrite all my uses of it! :p

Related links of testing for issues when using "fragments"/hashes:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results


Edit by Izzy: For all of you running into the same confusion as me concerning the comments:

I've just tested it out myself, with the following results:

  • trailing slash or not, makes no difference to the examples given here (#anchor and ?query would simply be appended to the specified ).
  • It however makes a difference for relative links: omitting the trailing slash, other.html and dir/other.html would start at the DOCUMENT_ROOT with the given example, /other-subdirectory being (correctly) treated as file and thus omitted.

So for relative links, BASE works fine with the moved page – while anchors and ?queries would need the file name be specified explicitly (with BASE having a trailing slash, or the last element not corresponding to the name of the file it's used in).

Think of it as replacing the full URL to the file itself (and not the directory it resides in), and you'll get things right. Assuming the file used in this example was other-subdirectory/test.html (after it moved to the new location), the correct specification should have been:

– et voila, everything works as expected: #anchor, ?query, other.html, very/other.html, /completely/other.html.

159
ответ дан 22 November 2019 в 23:03
поделиться

Я никогда не видел смысла в его использовании. Дает очень мало преимуществ и может даже усложнить использование.

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

Вкратце, я припоминаю, что была некоторая проблема с тегом в IE6. Вы можете разместить их в любом месте тела, перенаправляя разные части сайта в разные места. Это было исправлено в IE7, что привело к поломке многих сайтов.

2
ответ дан 22 November 2019 в 23:03
поделиться

Перед тем, как решить, использовать ли тег или не, вам нужно понять, как это работает, для чего его можно использовать и каковы последствия, и, наконец, перевесить преимущества / недостатки.


Тег в основном упрощает создание относительных ссылок в языках шаблонов, так как вам не нужно беспокоиться о текущем контексте в каждой ссылке.

Вы можете, например,

<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />

вместо

<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />

Обратите внимание, что значение заканчивается косой чертой, иначе оно будет интерпретировано относительно последнего пути.


Что касается совместимости с браузером, это вызывает проблемы только в IE. Тег указан в HTML как , но не , имеющий конечный тег , поэтому можно просто использовать без закрывающего тега. Однако IE6 думает иначе, и все содержимое после тега в таком случае помещается как дочерний элемент для элемент в дереве HTML DOM. Это может вызвать на первый взгляд необъяснимые проблемы в Javascript / jQuery / CSS, то есть полностью недоступные элементы в определенных селекторах, таких как html> body , пока вы не обнаружите в инспекторе HTML DOM, что должен быть base head ) между ними.

Обычное исправление IE6 - использование условного комментария IE для включения конечного тега:

<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->

Если вас не интересует W3 Validator , или когда вы уже используете HTML5, вы можете просто закрыть его, каждый веб-браузер все равно его поддерживает:

<base href="http://example.com/en/" />

Закрытие Тег также мгновенно устраняет безумие IE6 на WinXP SP3 для запроса ресурсов