BackgroundBefore diving into the rest of this post, review the following background material:
For speedy websites, follow Aaron Newton's approach:
CSS and Less in QBO 3Normally, all .css in QBO 3 will be rendered by calling Theme.ashx/Css. This will render in a single call all .css file configuration for the application, instructing the browser to cache the file for 24 hours. When rendering .less files, Theme.ashx will dynamically parse the .less file Notes:
CSS and IEIE 8 and later actually have excellent support for W3C standards. However, you need to tell IE to use a standards compliant mode. This basically means either:
In order to leverage standards as much as possible, the <!DOCTYPE HTML> shall be used. This is accomplished in XSLT as follows: <xsl:output method="html" indent="yes" doctype-system="html"/> See: ConfigurationQBO 3 renders all css found in the website's Styles folder by calling Theme.ashx/Css. This handler processes files as follows:
The Css.config file allows you to control the order in which .css files are emitted. For example, the qbo3.less depends on the existence of the Bootstrap-related .less file. If you have .css files that nothing else depends on, you do not need to include them in the Css.config file. If you are seeing odd css behavior, check your /Styles folder to see if there are unintended files there. The Css.config file is referred to in web.config as follows: web.config: <!-- Group all QBO custom handler together for easy readability --> <sectionGroup name="qbo" type="System.Configuration.ConfigurationSectionGroup, System.Configuration, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" > ... <!-- this is to read the QBO 3 css configuration file --> <section name="Css" type="qbo.Application.Configuration.StyleSheetConfiguration, qbo.Application"/> ... <!-- this is so IIS can serve up .less files directly; this is optional but convenient --> <section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" /> </sectionGroup> ... <qbo> ... <!-- the QBO 3 css configuration file contains all .css and .less files to render for a site. --> <Css configSource="config\Css.config"/> ... </qbo> ... <system.webServer> ... <handlers> <!-- .less handler to serve up .less files directly; optional but convenient --> <add name="less" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.less" verb="*"/> </handlers> </system.webServer> A same css.config is: css.config:
<Css UseMinified="false"> <StyleSheets> <StyleSheet Name="qbo3.css" Path="qbo3.css"/> <StyleSheet Name="test.css" Path="test.css" IsLess="true"/> </StyleSheets> </Css> Notes:
CSS SelectorsThe combination of standard CSS selectors and the MooTools Slick pseudo-selectors enables very concise javascript to select HTML elements. Below are some examples. // Get a list of checked PersonID checkboxes from a Search panel document.id('Search').getElements('input[name=PersonID]:checked') |
Quandis Business Objects 3 > QBO 3 Blog >