The __[CssPlugin]__ (AKA "Css") is a [NeWikiPlugin] that extends [RestrictedWikiPlugin], permitting insertion of an HTML {{<style>}}
element in the middle of a wiki page.
Here's a [CssPlugin Test Page|CssPluginTestPage] and [CssPlugin Test Page 2|CssPluginTestPage2], showing the use of the 'Old Standard TT' Google Font.
! Pre-Test
%%fudge
Does this work for the whole page, or just the content ''after'' the plugin?
It seems (at least in my tests) to work for the whole page.
%%
!! Parameters
None.
This uses the contents of the plugin body as the CSS content. In order for this to work you __must__
include a blank line after the beginning of the plugin.
!! Notes
CSS stylesheets are normally declared in the {{<head>}} of the page. Prior to HTML 5, putting a {{<style>}} element in {{<body>}} has been invalid as per the HTML standards and specifications. As HTML 5 seems to be a constantly-changing amalgam of descriptive practice rather than a prescriptive specification, and given both that "browsers don't care" and this practice is generally supported, this plugin simply takes advantage of that previously-''bad'' practice. It's now a feature not a bug.
Notably, as there is some potential for abuse with this plugin deployment is controlled via its [RestrictedWikiPlugin] configuration.
----
! Tests
(NOTE: these tests may fail if the plugin has not been installed.)
%%(font-size:smaller)
%%prettify
{{{
[{Css
.fudge {
margin: 1em 0.5em 1em -16px; padding: 0.9em 1em 0.9em 1em; max-width: 50%;
color: white; background-color: brown;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
border-left: 16px solid #ffa700;
}
}]
}}}
%%
%%
[{Css
.fudge {
margin: 1em 0.5em 1em -16px; padding: 0.9em 1em 0.9em 1em; max-width: 50%;
color: white; background-color: brown;
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
border-left: 16px solid #ffa700;
}
}]
%%fudge
Anyone know a good recipe for fudge brownies?
%%
----
{{{
[{Css
@import url('https://fonts.googleapis.com/css?family=Special+Elite');
}]
%%(font-family:Special Elite)
Here's some Special Elite text.
%%
}}}
[{Css
@import url('https://fonts.googleapis.com/css?family=Special+Elite');
}]
%%(font-family:Special Elite)
Here's some Special Elite text.
%%
----
[{Tag NeWikiPlugin}]