Widget:CSS: Unterschied zwischen den Versionen
Aus Stupidedia, der sinnfreien Enzyklopädie!
Phorgo (Diskussion | Beiträge) (Neu: „<noinclude>Weist Elementen CSS zu. == Anwendung == <code><nowiki>{{#</nowiki>widget:CSS|selector=''Elementselektoren''|style=''CSS''}}</code> Die ''Elementselektoren'' sind beliebige…“) |
K |
||
(12 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
− | <noinclude>Weist Elementen CSS zu. | + | <noinclude>Weist Elementen CSS zu. Darf gerne auf allen Seiten verwendet werden, sofern es nötig und sinnvoll ist. |
== Anwendung == | == Anwendung == | ||
− | <code><nowiki>{{#</nowiki>widget:CSS| | + | <code><nowiki>{{#</nowiki>widget:CSS|selectors=''Elementselektoren''|style=''CSS''}}</code> |
− | + | oder: | |
+ | <code><nowiki>{{#</nowiki>widget:CSS|selectors=''Elementselektoren''|style=''CSS''|media=''Media Query''}}</code> | ||
− | ''CSS'' ist das Gleiche, was auch im style-Attribut eines Elements stehen kann. | + | * Die ''Elementselektoren'' sind beliebige CSS-Selektoren, die allerdings keine Kommata enthalten dürfen, da damit die einzelnen Selektoren getrennt werden. Es funktionieren aber generell nur Selektoren innerhalb des Inhaltsbereichs. |
− | + | * ''CSS'' ist das Gleiche, was auch im style-Attribut eines Elements stehen kann. | |
− | + | * ''Media Query'' (optional) ist eine [https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries media query], mit der Styles geräteabhängig gesetzt werden können. Zum Beispiel sorgt <code><nowiki>{{#</nowiki>widget:CSS|selectors=.bla|style=color: black|media=max-width: 800px}}</code> dafür, dass die Schriftfarbe des Elementes mit der Klasse ''bla'' auf Schwarz gesetzt wird, wenn die Breite des Fensters maximal 800 Pixel beträgt. | |
Guckst du auch [[Hilfe:Stylesheets]]. | Guckst du auch [[Hilfe:Stylesheets]]. | ||
Zeile 15: | Zeile 16: | ||
</noinclude><syntaxhighlight lang="css"> | </noinclude><syntaxhighlight lang="css"> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | div#mw-content-text <!--{$ | + | <!--{if isset($media)}--> |
− | <!--{$style|regex_replace:' | + | @media (<!--{$media|regex_replace:'/[<{}]/':''|default:''}-->) { |
+ | <!--{/if}--> | ||
+ | div#mw-content-text <!--{$selectors|regex_replace:'/[<{}]/':''|replace:',':', div#mw-content-text '|default:''}--> { | ||
+ | <!--{$style|regex_replace:'# [{}<>] | expression | filter\s*: | accelerator\s*: | url\s*\(\s*[\'"](?!(https?://www\.stupidedia\.org|https?://stupidedia.localhost|)/images/.*) | image\s*\( | image-set\s*\( #ix':''}-->; | ||
+ | } | ||
+ | <!--{if isset($media)}--> | ||
} | } | ||
+ | <!--{/if}--> | ||
</style> | </style> | ||
</syntaxhighlight> | </syntaxhighlight> |
Aktuelle Version vom 5. November 2016, 18:09 Uhr
Weist Elementen CSS zu. Darf gerne auf allen Seiten verwendet werden, sofern es nötig und sinnvoll ist.
Anwendung
{{#widget:CSS|selectors=Elementselektoren|style=CSS}}
oder:
{{#widget:CSS|selectors=Elementselektoren|style=CSS|media=Media Query}}
- Die Elementselektoren sind beliebige CSS-Selektoren, die allerdings keine Kommata enthalten dürfen, da damit die einzelnen Selektoren getrennt werden. Es funktionieren aber generell nur Selektoren innerhalb des Inhaltsbereichs.
- CSS ist das Gleiche, was auch im style-Attribut eines Elements stehen kann.
- Media Query (optional) ist eine media query, mit der Styles geräteabhängig gesetzt werden können. Zum Beispiel sorgt
{{#widget:CSS|selectors=.bla|style=color: black|media=max-width: 800px}}
dafür, dass die Schriftfarbe des Elementes mit der Klasse bla auf Schwarz gesetzt wird, wenn die Breite des Fensters maximal 800 Pixel beträgt.
Guckst du auch Hilfe:Stylesheets.
Code
<style type="text/css">
<!--{if isset($media)}-->
@media (<!--{$media|regex_replace:'/[<{}]/':''|default:''}-->) {
<!--{/if}-->
div#mw-content-text <!--{$selectors|regex_replace:'/[<{}]/':''|replace:',':', div#mw-content-text '|default:''}--> {
<!--{$style|regex_replace:'# [{}<>] | expression | filter\s*: | accelerator\s*: | url\s*\(\s*[\'"](?!(https?://www\.stupidedia\.org|https?://stupidedia.localhost|)/images/.*) | image\s*\( | image-set\s*\( #ix':''}-->;
}
<!--{if isset($media)}-->
}
<!--{/if}-->
</style>