In Visual Studio 2010, is there a way of changing the Cascading Style sheet on the server-side based on the client browser? I want to create different style sheets for the different browsers (Firefox, Chrome, IE, Opera, Safari etc..) and specify which one to use from the master page.
I agree with KP; use a single stylesheet.
If you are using modernizr [sic], then you can style for different browsers very simply, for example:
someContainer {
/* standards based CSS */
}
someContainer.ie6 {
/* special CSS for IE6 */
}
My suggestion is to use the new HTML5 Boilerplate which includes modernizr. You'll be glad you did!
Check out the links below and don't look back. :)
Link to Boilerplate for HTML5
Link to Modernizr - ease the chaos!
Cheers
Here's a good article on detecting browser type in asp.net:
http://msdn.microsoft.com/en-us/library/3yekbd5b.aspx
Once you detect the browser type using for example, a switch statement on HttpContext.Current.Request.Browser.Type, you can easily insert a css reference into the page, with code such as:
HtmlLink cssLink = new HtmlLink();
cssLink.Attributes["type"] = "text/css";
cssLink.Attributes["rel"] = "stylesheet";
switch(HttpContext.Current.Request.Browser.Type)
{
Case "Firefox":
//use a certain path depending on browser type
cssLink.Attributes["href"] = "firefox.css";
break;
Case "Internet Explorer"
cssLink.Attributes["href"] = "IE.css";
break;
//and so on
}
Page.Header.Controls.Add(cssLink);
I don't know what the actual string values of Browser.Type will be for each browser. You'd have to test.
Even with the above, I'd still recommend using a single stylesheet for all browsers. With a little effort you can make a page render almost identically across all major browsers.
First I'd recommend starting with a reset CSS file such as the YUI 2 Reset or YUI 3 Reset. From there most styles will apply well and consistently across browsers. With all default styles reset you can build out your styles with complete control.
Unsure if I follow fully but you can specify these in the App_browsers folder of your project.
Related
I'm trying to include a header text in all pages of the document while printing as well as faxing using CSS #page rule. But it's somehow not working for me when i see the preview in Chrome. I'm checking this in jsfiddle. Here's my link for the code i have been working on Code Link
I know that using #media print content can be added. But i want to do this using #page css.
If you add
.subpage: after {
content: "name";
}
The content is added. But if you do the same thing as
#page {
#top-right {
content: "name";
}
}
It does not work. Is there a way to make this work?
This is exactly the way it works and your example is correct. However, modern browsers do no support #page just yet. You have to use software like Prince XML, PDF Reactor of Antenna House Formatter.
You can download a evaluation version of PrinceXML
pwavg is correct. None of currently-used renderers support #top-right rule, which is the reason why it is not working for you. You can see it here on Wikipedia (search for #top-right).
I know Wikipedia is not the most reliable/updated source, but still better than nothing, I guess. And at least on this particular page it looks relatively actively updated.
As far as I can remember, the only rendering engine that ever supported it (except Prince) was old Opera Presto renderer, but that is not developed anymore.
We are working on redesigning our web-based application’s Front-end. We started with a PoC based on Extjs 6 and we are facing few compatibility issues.
These compatibility issues are related to IE8 and CSS, while it is mentioned on your website that Extjs6 is fully compliant with IE8.
CSS classes work perfectly with all Major Web Browsers (Firefox, IE11, Chrome...) but some do not on IE8.
This is an example of CSS not working properly under IE8:
Ext.create('Ext.button.Button',{
text:'Button Test',
cls: 'btnColor',
renderTo: Ext.getBody(),
});
.btnColor {
background-color: green;
border-color:green;
}
Works on IE11 :
But not on IE8 :
We would like to know if this is a known issue and is there a specific processing which allows us to handle this kind of needs.
Thank you in advance.
The element in your comment above is the wrong element - that's the inner element for the button; you want the class with an id something like button-1009 (it's going to be an anchor or div tag a few elements up in the hierarchy).
And as to why it's not working - there are going to be multiple CSS selectors that define the background colour. The default one, from ExtJS, is going to be x-btn-default-large. The full CSS class for the attribute is going to be something like x-btn buttonCls x-unselectable x-btn-default-large x-border-box.
Done like that, both the buttonCls and x-btn-default-large are equally valid choices - the browser must pick one to use. IE8 is picking the last one; other browsers are picking the first one. Neither is wrong - the ambiguity is in your code.
To fix it, make your CSS selector more specific. Try:
.x-btn.buttonCls {
background-color: green;
border-color:green;
}
This applies to buttons (which will be the only things that have the x-btn componentCls attribute) that have the buttonCls cls attribute.
The problem is JavaScript syntax.
IE8 and earlier are strict about trailing commas on arrays and objects.
Your line renderTo: Ext.getBody(), ends in a comma, but is the last item in the object. In IE8, this will fail to compile.
The solution is simply to remove that comma.
You can keep an eye open for theses kinds of things by running your code through a linting tool like JSHint or ESLint, which will flag this kind if thing up.
The answer of Sencha support team:
https://www.sencha.com/forum/showthread.php?305980-CSS-compatibility-issues-on-IE-8.&p=1118734#post1118734
This clarified a lot for me, it might help you :)
Hello friend i would like to know if there is any way to avoid repetition of Firefox compatibility and chrome in CSS3, as we need to enter -moz- and -webkit- repetitively for compatibility. Is it possible to write just once in a page in any way ?
Use prefixfree
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
CDN link
Live DEMO on dabblet.com
I'd prefer using autoprefixer respectively the grunt or gulp plugin to generate a css file including prefixes, since I don't like the idea of including an additional library and doing this just in time with JavaScript.
just found on web
js
// For detecting browser prefix and capabilities
var el = document.createElement( 'div' );
var re = /^(Moz|(w|W)ebkit|O|ms)(?=[A-Z])/;
It's easy enough in Chrome Developer Tools to inspect an element and edit an existing CSS rule applying to that element but what if you want to create a whole new style rule?
In my case what I wanted to do was apply the following style rules:
br {display: none}
hr {margin-top: 20px}
font {font-size: 18px}
To the Principles behind the Agile Manifesto so that I could print it out on one A4 sheet of paper directly from the browser.
The official document on Chrome Developer Tools that I've already linked to does have a section on Adding New Rules and Properties but it's out of date and doesn't work like that in the latest version of Chrome.
There is now a dedicated button in the Styles pane for "New Style Rule". It looks like a plus (+):
This will create a new style block which will allow you to define the selector yourself:
This is handy for little amendments on the fly, however it doesn't work well for CSS3 media queries that need extra curly brackets, or for pasting whole sections of CSS in to test.
The solution to that is to first click on the + button to add a new style, then hit enter (or click in the adjacent whitespace).
This will now show a link to the inspector stylesheet called inspector-stylesheet:1
If you click that link, it opens a whole live stylesheet that you can write complex rules in, as well as paste a whole external stylesheet into for testing.
Try using CSS Brush, a chrome plugin to create CSS live. You can create selectors from the page. You can have the complete CSS path or filter it up to make a shorter one. The context-sensitive menu is quite helpful while editing CSS properties live. You can even switch on/off properties or selectors.
This is for using in Safari, though it could probably be used on Firefox as well. In Chrome you have to add a plugin anyway (which generally allow for custom CSS per domain), and Opera already allows this to be done without needing any CSS. But while it's for customizing on the client-side, it's also a pure CSS question. So I'm using no plugins here.
So, again, I got a custom CSS code (easily) working for all domains. Now I want to get specify CSS code for each domain. All with just 1 CSS file that's being loaded by Safari.
Over the web and googling, I've found two ways to supposedly do this, but none actually worked. They're both documented on userstyles.com:
#-moz-document domain("your-domain.com") { }. This would be perfect, since I can have several tags like that and just choose which style will be loaded for which domain. It just doesn't work.
#namespace is quite confusing and I've tried every variation I could think of. None worked.
Safari does not appear to support the #-moz-document rule, which would explain why that wouldn't have worked for you. In Firefox, the following stylesheet will work:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("stackexchange.com"), domain("stackoverflow.com") {
/* your styles here */
}
However, in Safari 5, there is an extension called User CSS (note: link is to the developer's website and not to a page in the Safari Extensions gallery; caveat emptor) that will allow you to apply a single user stylesheet to multiple sites. (It seems to be the rough Safari equivalent of Stylish.)
With respect to your last comment, I think you're right: there still seems to be no way to do this with only CSS.
have you tried setting a <link /> src dynamically based on the document.domain? If you're using javascript, that is. This will let you set the src of the link tag to mydomain.com.css or myotherdomain.com.css