We have been using antisamy for our product but now with new HTML5 tags and css3 styles introduced its becoming a pain point to go and allow specific styles with defined values.
Is there any open source antisamy policy file that has full support for new tags and styles. All the open antisamy policy files that are available online do not have support for HTML5 and CSS3.
Another Option
If I have to go and change the policy file to adjust all the HTML5 tags and CSS3 styles is there a way that I can adjust the styles so that I don't have to at least adjust the browser prefixes. For below example if we have a way to have browser-radius for "-moz-border-radius" or "-webkit-border-radius" or "border-radius"
eg.
<common-attributes>
<attribute name="border-radius" description="The 'id' of any HTML attribute should not contain anything besides letters and numbers">
<regexp-list>
<regexp value="<regular-expression>"/>
</regexp-list>
</attribute>
</common-attributes>
As this css property you can define in the css-rules section. Also as per w3schools the border-radius property accepts length or percentage so you can use already available regex length and percentage.
<property name="border-radius" description="This property allows you to add rounded borders to elements">
<regexp-list>
<regexp name="percentage"/>
<regexp name="length"/>
</regexp-list>
</property>
Related
I want to use CSS styling for some widgets in only one plugin of my application.
The Plugin's plugin.xml contains:
<extension
point="org.eclipse.e4.ui.css.swt.theme">
<theme
basestylesheeturi="css/default.css"
id="my.app.id.css"
label="Planning Theme">
</theme>
</extension>
The Plugin.xml's extension tab didn't suggest the extension point, but after I entered it in the file, I could see the properties. One of which is "basestylesheeturi" and it allows me to browse for the file. So the file definitely exists.
#charset "ISO-8859-1";
#MYTESTLABEL{
color: blue;
}
Text {
color: COLOR-CYAN;
background-color: COLOR-WIDGET-BACKGROUND;
}
Button {
font: Verdana 24px;
border-color: #EEEE00;
border-width: 2;
}
But it isn't used by Eclipse. When I start my Application, I cannot see any styles from the css file. Setting colors to black or fonts to huge sizes... nothing has an effect. Even Syntax Errors in the css file won't result in an error message.
What can I do to ensure my plugin uses this css file for Texts, Buttons, etc.?
Is my old Eclipse version maybe not supporting the extension point?
Version: Oxygen.3 Release (4.7.3)
EDIT
If I understand greg's answer correctly, I have to use both extension points (org.eclipse.core.runtime.product and org.eclipse.e4.ui.css.swt.theme). Additionally I added the css/default.css to the bin.includes section of the build.properties. The style is still not used.
There is a cssTheme already defined in another plugin.xml for the product by using those two extension points. From my understanding it should be possible to define a second theme only for a certain plugin.
It may be that I need to implement a ThemeSwitchHandler as vogella describes here but it's unclear how to make use of it (how and when to call it).
That extension point just defines a theme, it doesn't tell e4 to use it.
For a pure e4 RCP you specify the theme to be used in the cssTheme property of the org.eclipse.core.runtime.products extension point which defines your product:
<extension
id="product"
point="org.eclipse.core.runtime.products">
<product
name="%product.name"
application="org.eclipse.e4.ui.workbench.swt.E4Application">
<property
name="cssTheme"
value="my.app.id.css">
</property>
... other properties
If there is already a theme defined in the RCP you can contribute an extra stylesheet file to the theme. For example:
<extension
point="org.eclipse.e4.ui.css.swt.theme">
<stylesheet
uri="css/e4-dark_pde_prefstyle.css">
<themeid
refid="org.eclipse.e4.ui.css.theme.e4_dark">
</themeid>
</stylesheet>
</extension>
Which adds an extra file to the standard Eclipse org.eclipse.e4.ui.css.theme.e4_dark dark theme.
I am working on an interesting chrome Extension. On certain websites, the CSS of the extension distorts because the website's css over rides my extension's css.
I realize that these scenarios have been posted to stackoverflow before but almost all the answers suggest that I use an IFrame.
I am not very content over the notion to use an IFrame because sometimes I have to change websites content and for this I will have to find way arounds while using IFrame.
I have come up with the following solutions
Introducing my custom CSS class naming conventions and applying those classes to my chrome extension elements.
For Example:
.Extension-Name-classname{
// css code
}
<element class=".Extension-Name-classname"> </element>
Use Web Components. My notion is that since every web component has its own CSS - it will solve my case.
What should be the bet way to solve this issue?
I'm not sure what your trying to do, but if you're injecting some html element and want your css to always take precedence on that element and its children, you should give that element an ID and always use it -
<element id="my-extension-spacename">
<element class="class-name-1">
</element>
<element class="class-name-2">
</element>
</element>
#my-extension-spacename .class-name-1 {
// css code
}
#my-extension-spacename .class-name-2 {
// css code
}
How can I make Diazo to use theme's css file?
Whenever I replace something using (for example):
<replace css:theme="#footer" css:content="#portal-footer" />
It doesn't use the #footer style I defined in the theme's css file. Since I didn't enable Plone's css files either, it behaves as if there was no style at all. I found a workaround by renaming the style on my css file to match the one in Plone (i.e: renamed #footer to #portal-footer) but then what is the purpose of the theme's css file?
Thanks in advance.
The replace statement replaces the entire tag found by the theme selector with the tag found by the content selector, attributes too. So if you want to maintain the original class you will have to append/prepend/replace only the children of that tag:
<replace css:theme-children="#footer" css:content-children="#portal-footer" />
More info:
http://diazo.org/advanced.html
I'm doing some custom dev work on an installation of the Whitehouse WordPress theme. And, it appears that some style rules defined within the theme are overriding various features of the tags I'm using, making it extremely annoying to work.
The cellspacing and cellpadding attributes seem to be overridden, all content in table cells aligns to the bottom, and strange gaps and spaces appear after various elements.
I don't know enough about the theme to know what rules are causing which issues - is there any way to make a browser ignore ALL CSS declarations for a specific element or elements except the inline declarations I add to the tags myself?
the CELLSPACING and CELLPADDING attributes seem to be overridden,
Yes, as the specification says: The UA may choose to honor presentational attributes in an HTML source document. If so, these attributes are translated to the corresponding CSS rules with specificity equal to 0, and are treated as if they were inserted at the start of the author style sheet
I don't know enough about the theme to know what rules are causing which issues
Use a DOM inspector such as Firebug, Dragonfly or the ones built into Chrome, Safari and (recent versions of) Internet Explorer. They will tell you which rules are applied to which elements.
is there any way to make a browser ignore ALL css declarations for a specific element or elements except the inline declarations I add to the tags myself?
No, there is not.
i have an inline svg with foreignObject elements which contain xhtml fragments. however, the xhtml content is improperly styled due to crosstalk from styles set through js in the svg and its parent html document (namely the jqtouch library). thus i'd like to apply the browser default styles to the children of my foreignObjects. therefore i need to reference the browser default style sheet. does anybody know how to do this ? for safari i could probably take it from the webkit sources but i'd prefer a solution that doesn't require keeping track of modifications after a browser upgrade.
using the native svg text elements is not an option as automatic word wrapping is mandatory.
neither is ...
moving the inline svg subtree out of the toplevel css scope.
modifying the offending toplevel css
(in fact, modifying every css selector and adding a unique css class to every element outside
the foreignObjects might become an option, if it can be done programmatically and efficiently.
hopefully there is a more elegant solution ?)
platform:
safari 5.0.3 ( 7533.19.4 )
win xp sp3
thanks in advance for your efforts
best regards, carsten
I guess the default styles will be applied only if you embed the xhtml as a whole document with head body etc