Many of styles are not applied and pages looked weird in IE9, because IE has CSS limitation. The problem is that i can't modify css because it is generated with Liferay.
IE9 indeed has limited support, however, as you can create your own theme, you can change the css that is generated.
Related
In the documentation for Semantic-UI Icons, the framework purports to "include a complete port of Font Awesome 5.0.8" which supports SVG icons and Semantic-UI even includes in the assets an icons.svg file. I have searched and found no information in the Semantic-UI documentation as to how to actually use SVG icons. I have tried supplying the file as an argument to the #font-face property, but that is not supported by most modern browsers. Does anybody know how to use the SVG icons that Semantic-UI purports to support?
P.S. If anybody is wondering why I need the SVG icons, it is to work around a bug in IE11. I am dealing with a network of users on Windows 10 with the group policy to "Block Untrusted Fonts" enabled, and IE11 does not properly allow my website to serve .woff, .woff2, .ttf, or .eot files to the user. This is a confirmed issue with IE11 and the only workaround that is feasible for this project may be to use SVG icons.
I'm looking for a way to whitelist fonts that pages in Chrome can use. In Firefox I would just simply disable Allow pages to choose their own fonts, instead of my selections above in content settings but Chrome seems to be keen on letting web designers force ugly and often unreadable fonts on us.
I don't want to use * { font-family: sans; } style in Stylish, because I want to keep sans (or serif) and monospace sections, and web designers, insane as they are, usually keep those at the end of the font-family list.
I've done my research and I still can't figure out how to do it via Chrome extension API.
I considered intercepting requests for CSS files and modifying them in response but this isn't possible via current API.
I could also traverse the DOM tree, inspect CSS on each node and replace it appropriately but it'd expensive. Moreover this wouldn't work for pages which build the content from JavaScript. So I'd have to use MutationObservers and that would be way too expensive.
If I could somehow read CSS files that the current tab is using, I could collect the rules with font-family style and inject appropriate <style> element into the page via content script. But I couldn't find a way to read those CSS file via current API. (I'd also have to read <style> rules embedded in HTML but that's doable).
I could also do it via some proxy but I'm not sure how to (securely) cope with SSL.
I could get close with fontconfig. It gets rid of Arial but doesn't work for external (and usually most ugly) CSS fonts.
Is it possible to achieve my goal via current Chrome extension API? How? If not, what would be the workaround?
I don't care about inline styles and styles set from JavaScript. I can live with those. Vast majority of pages I'm concerned about use styles from external stylesheets.
EDIT
wOxxOm's advice to modify document.styleSheets is the way to do it and I've made a simple extension that worked on all sites! Unfortunately, in current Chrome, CSSStyleSheet#cssRules returns null for stylesheets loaded outside of page origin https://code.google.com/p/chromium/issues/detail?id=45786. T_T
(I'll of course publish the extension on GitHub and post the link here after I polish it).
EDIT 2
As wOxxOm suggested, blocking web fonts is also an option (though less ideal I'd say) and there even exist good open source extension for it https://chrome.google.com/webstore/detail/disable-web-fonts/olmabeadgbpmhllgdkemfdnmkngkbkeg. It needs some white list for iconic fonts though. Local fonts can then be managed via fontconfig.
This issue is probably related to ugly looking web fonts https://code.google.com/p/chromium/issues/detail?id=173207.
EDIT 3
I ended up with this nice (and open source) extension https://chrome.google.com/webstore/detail/font-blocker/knpgaobajhnhgkhhoopjepghknapnikl. It's a blacklist but that's enough for my needs and it works with iconic fonts. As far as I can tell, to implement a font whitelist extension I'd have to be able to enumerate all fonts loaded by a web page and that appears to be impossible in current Chrome (see first edit).
I've created a very simple ASP.NET 4.5 MVC4 web site which uses OpenLayers 2.12. It's got only one page that shows a map with a few points and lines on it. If I run it locally, it runs fine, but after publishing to my Azure Web Site, the OpenLayers' CSS files won't load. I have now added the OpenLayers CSS hard coded in my bundleConfig, and now it works fine. But of course, this is not what I want, because OpenLayers has specific CSS files for other platforms and browser versions etc.
Locally, I just have to include openlayers.js and OpenLayers then adds the right css files. Does anybody know why this doesn't work after publishing to Azure?
From the docs in openlayers.js:
Please remember that when your OpenLayers script is not named
"OpenLayers.js" you will have to make sure that the default theme is
loaded into the page by including an appropriate <link>-tag,
e.g.:
(code)
<link rel="stylesheet" href="/path/to/default/style.css" type="text/css">
(end code)
Because Azure changes the file names that are included, I indeed should be adding the reference to the default style myself. Also, I can just link to style.css, the other css files for e.g. IE6 or Mobile won't be uses automatically, these are just there for yourself to use it when appropriate.
Is there a way I can load view icons (ex: vwicn001.gif) within XPages being rendered by XPiNC? Most of what I've found only seems to work with web browsers.
My work around has been to use image resources, as that seems to work in both environments.
Look at a normal client installation (not Designer) - the icons are not there. You need to add them into resources
I made a website with custom fonts embedded on the website using font-face. The font embed works fine across all major browsers on Windows, including IE7. However in IE6 the embedded fonts tend to disappear from time to time.
This only occurs on the website after I have implemented on CMS Made Simple however (and then it only occurs on IE6 during navigation between pages).
Template: http://www.vdpwebsites.com.au/tony/2011/bindara/index.html
(pages available: home, about us, stallions)
CMSMS: http://203.98.84.170/~bindara/
I think it might be a loading problem or something. On my template when I navigate/go between pages I can see the font first appearing in arial, before being replaced by the embedded font.
when you first go to the website on CMSMS the embedded font shows, but when you switch pages it gets stuck on arial. The only way to get it to show the embedded font again is to reload the page (ctrl F5) or clear the cache. Refresh doesn't do anything but replace the embedded font with arial if it was showing.
I'm running windows 7, and the IE6 is running off a Virtual PC. I'm not sure if the same would occur for someone who were using IE6 on their actual machine. Can anyone test this for me?
Cheers
I checked the site on a remote IE6 machine. I did not ever see the embedded font fail to load. Though I did see Arial at first, after a few seconds the embedded font loaded.