I found a problem with how Safari prioritises CSS between the css included with the HTML page and the injected content CSS. I created a minimal reproducible showcase and uploaded it to GitHub.
The issue is as follows: Extension-injected CSS is overruled by lower-hierarchy css rules from the website itself. In this screenshot div{} rule is within the website's CSS, and div.hello{} rule is declared in the Safari extension's content CSS and injected by Safari.
Result:
The div in the HTML is red, instead of blue.The screenshot shows that Safari uses div{} with higher priority over div.hello{}. Please note, that initial rules are added by Safari automatically. The content CSS doesn't include such declaration.
Please see minimal example here, or the GitHub repo I created for a minimal reproducible example: https://github.com/MikeSpock/safari-extension-css-bug
How to create stable CSS for the markup I add to websites via my Safari extension, seeing that every CSS within the website overrules the CSS from the extension? This is not how Chrome extension work for example, it works as you might expect, handling CSS priorities correctly.
Minimal viable example:
showcase.safari.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="./">
<link rel="stylesheet" href="./showcase.safari.css">
</head>
<body>
<div>
This should have a red background.
</div>
<div class="hello">
This should have a green background.
</div>
</body>
</html>
showcase.safari.css
div{
background:red;
}
showcase.safariextension/content.css
This is the css injected via a Safari extension
div.hello {
background:green;
}
showcase.safariextension/Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Builder Version</key>
<string>13607.1.40.1.5</string>
<key>CFBundleDisplayName</key>
<string>safari-extension-css-bug</string>
<key>CFBundleIdentifier</key>
<string>com.yourcompany.safari-extension-css-bug</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>Content</key>
<dict>
<key>Stylesheets</key>
<array>
<string>content.css</string>
</array>
</dict>
<key>ExtensionInfoDictionaryVersion</key>
<string>1.0</string>
<key>Permissions</key>
<dict>
<key>Website Access</key>
<dict>
<key>Include Secure Pages</key>
<true/>
<key>Level</key>
<string>All</string>
</dict>
</dict>
</dict>
</plist>
Add showcase.safariextension folder as a Safari Extension via Safari Extension Builder, and open showcase.safari.html for a minimal example.
I found a workaround that was good enough for me, and possibly a good general practice when developing extensions.
Change all your html tags you generate in your content script such as
div
a
and others to custom tags, so that it would never collide with the website's own style definitions:
adiv
aa
Then you can make sure you start your styles from scratch and nothing would be overridden.
Related
So this is probably about as basic as it gets and I'm not understanding what I'm doing wrong. I am using IIS on Windows 10 (for development\practice) and I have only two files in my web root: default.htm & style.css
default.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bodystuff">
Stuff
</div>
</body>
</html>
style.css
#bodystuff {
font-family: Georgia;
font-size: 5em;
}
My problem (and odds are it's something silly that I'm missing) is that when I open the page with IE (11 if that matters) it opens up fine and the stuff in my body properly renders using my style.css file. However if I open the same web site up with Firefox the site is rendering as if I had no styles configured at all.
Any suggestions on what I am missing to make it so that my CSS is used when opening the site with either IE or FF?
The end cause was that the file encoding for my default.htm and style.css files were different. I recreated the files using UTF8 and now it works. It would appear that Firefox is quite sensitive to the file encoding between CSS and HTML documents. I found the solution thanks to #AlexanderO'Mara pointing me to Firefox's developer console which revealed a warning that I then searched for and found a discussion about here.
Is it possible to add a conditional style sheet to an xpage.
Done like this in html:
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Though about adding with computed field set to HTML and code javascript like:
return '<!--[if lt IE 8]><link rel=\"stylesheet\" href=\"../../blueprint/ie.css\" type=\"text/css\" media=\"screen, projection\"><![endif]-->'
but then it would be included in the body of page, not the header with the other style sheets.
Need for a proof of concept putting together using http://blueprintcss.org.
an Xpage theme would be great for this. There is an example included with the notes install.
go to C:\ Notes directory \xsp\nsf\themes
make a copy of webStandard.theme, rename is webStandard.xml and open in an editor of your choice, this will show you a lot of examples of what a theme can do. Apply attributes, add resources, compute these via expressions etc.
Snippet:
<resource rendered="#{javascript:context.isDirectionRTL()}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspRTL.css</href>
</resource>
<!-- IE Specific -->
<resource rendered="#{javascript:context.getUserAgent().isIE(0,6)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspIE06.css</href>
</resource>
<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspIE78.css</href>
</resource>
You can use the rendered property with SSJS to show an element for IE only:
rendered="#{javascript:context.getUserAgent().isIE()}"
Then your CSS ressource will only added to the generated HTML response if a XPage is opened with Internet Explorer.
EDIT:
In your case this should fit your requirements:
<xp:this.resources>
<xp:styleSheet href="../../blueprint/ie.css"
rendered="#{javascript:context.getUserAgent().isIE(0,7)}"
media="screen, projection">
</xp:styleSheet>
</xp:this.resources>
This page doesn't get the table styles from the style sheet. If I put the same styles in the page itself, they are applied. What could cause this? The css file name is correct and is read by other pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagelinks | Known Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="pagelinks_windows.css" />
<!-- style>
#known_issues th, #known_issues td {
font-size: 13px;
text-align: left;
}
</style -->
</head>
<body>
<h1>Known Issues</h1>
<p>
Known bugs and issues are listed here.</p>
<table id="known_issues">
<tr><th>Tracking No.</th><th>Category</th><th>Description</th><th>Status</th><th>Workaround</th></tr>
<tr><td>plt001</td><td>Site</td><td>Site navigation broken on Internet Explorer 8</td><td>Closed</td><td>None. That browser version has a major bug involving javascript objects. Users must upgrade to Internet Explorer 9.</td></tr>
<tr><td>plt002</td><td>Site</td><td>Saints and feasts do now show description</td><td>Open</td><td>None. The description data for the Saints and the feasts is being compiled.</td></tr>
</table>
<br/>
<br/>
Test if the content of the css file is visible.
Try to open it in the browser.
Common possible error when letters-case (A\a and so on) in file-names differs - this willn't work on *nix hosting servers, ever if it worked localy on windows.
Another common situation: when is error in path to file from current file-directory.
Are your stylesheets in the same root directory as this html file? Common practice is to put stylesheets, js, includes, etc into different directories. Perhaps you follow this convention and simply forgot href="css/pagelinks_windows.css"? Hard to find the answer to your problem without much more information but it's usually something small you're missing. One of those that you end up with a forehead-slap once you find it :)
What does your stylesheet look like?
I think you might have some conflicting css, try adding your table style at the VERY bottom of pagelinks_windows.css
Got an interesting CSS problem. The first graphic shows the buttons on the PlaceBar in IE where the "Views" button is pushed up. This button has children if this makes a difference. In FireFox everything lines up perfectly. Does anyone know if this is adjustable in the CSS and if so where?
I've found another fix. Add this to the CSS:
.lotusPlaceBar .lotusBtnContainer {
float: right;
}
You can force IE not to use compatibility mode by using the X-UA-Compatible meta tag to control the version of IE to render the page for.
Add the following meta tag to enable IE8 Standards Mode:
<meta http-equiv="X-UA-Compatible" content="IE=8" >
You can add the meta tag in a theme using:
<resources>
<metaData>
<httpEquiv>X-UA-Compatible</httpEquiv>
<content>IE=8</content>
</metaData>
</resources>
I have written a confluence macro. It uses velocity to generate html table. How can I style this markup with css if I don't use <html> and <head> tags in my velocity model. I have tried to do as in this example but id doesn't work(I mean it takes no effect and there is no css resource file that I have specified inclusion on the code of result page of macro)
if i understand you correctly
you need to add links on your css files to atlasian-plugin.xml for example
<atlassian-plugin name='Just name' key='com.your.path.to.lib'
plugins-version="2">
<resource type="download" name="style.css" location="css/style.css">
<property key="content-type" value="text/css"/>
</resource>
</atlassian-plugin>
after that you need to add this link to the top of your velocity template
<link rel="stylesheet" href="$req.contextPath/com.your.path.to.lib/style.css"
type="text/css"/>