For the occasional late-night computing session, I like to tone done the colors of the sites I'm using for the sake of retaining my eyesight. My typical go-to extension is Stylish, a useful tool that loads custom CSS in webpages.
Curiosity and tampering led to the question I have here. Can I change WebKit's CSS defaults in WebKit's tags to better suit my needs? I'm speaking in regards to custom browser CSS rules, those used in Safari and Chrome for -webkit-, and others for other browsers. Is there any plain-text file that helps define these rules, which would allow me to edit them and therefore tamper with browser-loaded defaults?
What you're looking for are userstyles that would let you customize your browsing experience (if you're really specific about setting up your browser, you may want to do a quick google search on userscripts as well for more functional modifications)
The rules you are referring to are, for all purposes, bona-fide css rules with vendor prefixes.
Check out http://userstyles.org/ and from there you can download an add-on for Chrome here: https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe
I don't recommend going on with this. Making a page appear differently in a certain browser,
is not user friendly, but rather confusing
and its sure to decrease usability.
Having said that, that are many webkit specific rules which you can define. And, overriding them is the only way of changing the default behavior.
This page consists all the webkit specific rules and you can override these rules by redefining them in your style sheet.
For example:
-webkit-box-orient: vertical;
Override the default rule and orients the elements vertically.
Related
I'm learning to program and a page that contains pieces of code won't let me copy and run them, is there a way to permanently disable the --no-select attribute on this page? Maybe an adblock filter?
That attribute is in class.
<div class="s1-description-code s1-description-code--no-select">
I recommend you look into user stylesheets, see: https://superuser.com/questions/560539/how-can-i-force-my-css-styles-when-i-visit-a-website
You can change your browsers user stylesheet, but the easiest method is to install the Stylish extension on Chrome or Firefox and add this:
* {
user-select: text !IMPORTANT;
}
Stylish also allows you to disable the sheet on certain websites, or have per-site custom styles.
This may break things on certain websites, so I recommend you either configure Stylish to not apply the stylesheet on those sites, or you use a more specific selector rather than *.
A final caveat, this can be defeated if the website uses !IMPORTANT, at which point you may need to look into more involved solutions, such as running JavaScript on page load to remove the offending CSS rules.
I am attempting to ask a more specific question than "how does browsers work??", please bear with me :)
If I understand correctly, html elements may have some default properties that determine their behavior. For example, <div> has display: block property set by default, while span has display: inline
These defaults exist because they are defined in the browser's default stylesheet.
Ok cool, I get that (hopefully). But what about <br /> or <img>? The behavior of those is determined by more than their properties right? Is it just up to the browser's implementation to make them behave how the W3 html5 specification says they should?
Also, is there an official word for this kind element behavior or does it just fall under 'browser implementation'?
So, you're really asking two questions here:
What is the default presentation and behavior of HTML elements?
Who/what determines how this works in a browser?
Let's start with question 2
The HTML specification is written and reviewed by a group within the W3C called the HTML Working Group. When they've agreed on a specification they publish it as a Recommendation. You can read the HTML 5 spec here, but I don't recommend reading the whole thing - it's very long and boring full of technical jargon.
However, the W3C's recommendation defines only the syntax and intended purposes of the features of HTML - it does not define how browsers should render HTML. Browser vendors, like Microsoft (IE), Mozilla (FireFox), Apple (Safari), and Google (Chrome), get to determine how their browsers render and implement the features of HTML.
Fortunately, most of the common HTML elements behave almost exactly the same from browser to browser. It's in the vendor's best interests to stay consistent among each other, because if one of them decided to do something drastically differently from all the others, the people who build websites would have to spend more time supporting that specific browser and it would fall out of favor (as was the case with IE 6 up until IE 11).
What determines the behavior of HTML elements?
The browser's rendering engine. Some browsers share the same rendering engines (like Safari and Chrome) (not true anymore - see comments), but not all. This article offers some insights (and leads to more insights) about how browsers are built, and here's an article listing several browser engines.
For the most part, you can affect how your HTML document looks by changing its CSS properties, but the behavior of most HTML elements is unchangeable without scripting using JavaScript.
The default CSS styles applied by your browser is defined by a stylesheet called its User Agent Stylesheet. These are usually pretty basic styles that browser vendors design in order to make HTML documents a little more readable without drastically affecting the presentation of the document.
However, there are so many basic styles applied by different browsers, that it's very common for web developers/designers to what's called a CSS reset. Normalize.css is a great example of this, and it's one of the most popular ones.
I believe it is up to the browser implementation. The way it will appear on the screen is up to the browser implementation.
Although, all browsers agree on how it should appear on screen.
These standards are defined by the World Wide Web Consortium - (wikipedia).
I guess this information you are seeking can be found in these sites!
What goes behind the scene when a web browser is served with HTML content and it renders it?
For example, if the browser encounters, say, an <h1> tag, how does it first look for a style defined and if not goes for the default <h1> font style? Where/How is this default style defined?
Browsers that implement CSS for rendering HTML make use of user-agent default stylesheets (which have a low precedence in the cascade making them trivial to override in your own CSS). This is how they obtain default styles for various elements in absence of an author stylesheet.
Some vendors provide the source code of their UA default stylesheets so you can look at them and see how exactly certain browsers style certain elements by default. You can find some links in this question.
Most browsers provide a user stylesheet feature, where you write CSS that applies to all Web sites (or only to specific sites, via the #document rule). This is where !important is commonly and acceptably used, as author styles (i.e. styles that come from Web sites themselves) will typically override user styles. You generally don't want to modify a browser's user agent stylesheet at all, even if it's open source, unless you're planning to fork it into something entirely new and you need to add styles that are specific to that fork.
As for how a browser looks for a style definition: that's a very broad question, but it mainly involves looking at each stylesheet as well as any inline style attributes and resolving the cascade and any other environmental constraints accordingly, so as to obtain a value that it can use for the actual drawing. The cascade itself is a semi-broad topic, and how exactly a browser parses CSS and implements cascade resolution is an implementation detail and therefore highly dependent on the browser you're looking at. If you're interested in the gory details, Tali Garsiel has an incredible write-up of the entire process of receiving and displaying a Web page.
Think of Browsers as Language interpreter. Language over here are CSS, JS, HTML etc. So they have inbuilt engine to handle your html tags and render it appropriately as per specification.
As per my experience, I am ok with it. I shall also say for which targets tese CSS styles are supported with Flash and php.
I heard that many developers are not recommending using CSS reset, what are the reason for it?
for example:
What are the rules for portable CSS?
When using a CSS reset, lots of HTML elements become unusable : titles are small border-less and margin-less, input elements are misformed, etc... You need to restyle all these elements, which is more work.
Some people think that this process of destyling/restyling is unnecessary, error-prone, and that it removes some necessary differences between platforms. Most notably, input elements are typically styled by a browser according to its host platform (windows, mac, etc...) and some people think that UI consistency should be respected even inside a browser.
CSS Reset is found there to normalize the CSS across browsers and gives you easier and more intuitive design possibilities.
For instance, when you use <h1> without a CSS reset/normalization, it will have larger font-size, some margins, and a bold font-weight, with a CSS reset, it would look like a normal text, and it allows you to shape it the way you want, without worrying about the browser defaults which may vary between browsers.
The question you should ask yourself, do you want it?
Remember that a CSS reset does not have to be absolute, if you want to remove all margins and paddings, but retain font size and weight, you could use the classic * { padding: 0; margin: 0; } rather then using a full-powered CSS reset.
If you are making a website,
and you know html & CSS like the back if your hand,
and you can test directly on all major operating systems without compromise,
You're proficient in correcting errors/conflicts with old browsers,
or you are making a website for one browser only.
You may not need a CSS reset or it would be best for you to make your own.
But if you're making a typical modern website and you want to avoid
cross browser conflicts, a reset sheet should "set" the html elements to a similar
playing field.
Many reset sheets interfere with styling too much, all you really want is a default like CSSesta or Eric Meyer's
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
(I'd like this to be the definitive community wiki. I seeded it from my own answer to this question.)
Specify Everything
A lot of cross-browser issues amount to this: you didn't specify something, and different browsers make different assumptions. Therefore:
Declare a valid doctype
Your doctype tells the browser what rules you'll be using in your code. If you don't specify, the browser has to guess, and different browsers will guess differently.
In my experience, a "strict" doctype makes IE behave better (enables things like CSS :hover selectors on divs in IE7).
This article gives good background on doctypes.
Use Web standards
Avoid browser-specific markup, or only use it when its failure in other browsers won't be significant to the site experience.
Validate your HTML and CSS
You don't have to get everything perfect, but validation is good feedback. As Jeff said:
Knowing the rules and boundaries helps you define what you're doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random "I just do this and it works" one.
Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not? Validating will help you catch that, close the tag, and eliminate ambiguity.
Consider a CSS Reset
Different browsers assume different baseline CSS rules. You can help them all to act the same by explicitly ironing out the differences up front. Eric Meyer, who wrote CSS: The Definitive Guide, uses this reset. Another popular choice is YUI Reset CSS.
Use a Javascript library for DOM interactions
Whenever your Javascript needs to work with elements on your page, it's best to use a library like jQuery, Prototype, or MooTools. These libraries are used by many thousands of developers, and they take most of the inconsistencies between browsers' interpretation of Javascript, deal with those internally, and give you a consistent set of commands that just work. Trying to find and work around all these inconsistencies yourself is a waste of time and likely to create bugs.
Test in multiple browsers, deal with IE last
Test in multiple browsers as you go. Generally, you'll find that non-IE browsers behave similarly and IE is a special case - especially if you follow the advice above. When necessary, you can add IE hacks in a separate stylesheet and only load it for IE users.
Quirksmode.com is a good place for hunting down random browser differences.
Browsershots.org can help show how your page will be displayed in an assortment of browsers and operating systems.
Fail Gracefully
No site will look perfect in every browser that exists. If a user doesn't have Flash, or Javascript, or advanced CSS, etc, you want your site to be usable anyway. Design with that in mind:
Check the bare HTML
Try loading your site with bare HTML - no styles, no scripts. Are menu options available? Does primary content precede secondary content? Is the site usable, even if ugly?
Consider test-driven progressive enhancement
Described in this article, this technique uses javascript to check if a browser has a given capability, such as support for a given CSS property, before using it on the page. It is unlike browser sniffing because it tests for features rather than a specific browser.
Use a library like jQuery abstract away the differences in the DOM, AJAX and JavaScript.
Make sure you're keeping HTML, CSS and Javascript in separate files as much a possible. Mixing structure, presentation and behavior in your HTML file just makes finding and fixing problems harder.
Use Firebug in Firefox for:
Debugging/stepping through your JS.
Seeing how your stylesheets are being interpreted and hacking them up on the fly to see how to fix your problem.
See how many calls you are making for remote resources and how long they take.
Profile your code.
Chrome and IE8 have similar tools built-in that can be used for the same thing.
Opera and Safari (and IE) have Firebug Lite.
Use CSS Reset on start of your stylesheet...
You can get one here...
Validate your code by w3c ...
You can validate your code here by page link or simply copy paste page element
My #1 rule is use a strict doctype. HTML or XHTML is fine, but using the strict doctype removes pretty much every browser quirk there is, especially in IE7+.
Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not?
Actually you can't put any other block tags inside a <p> tag, that's why the spec allows you to omit the closing tag. If you start a list without closing a paragraph, then the paragraph is implicitly closed. And the validator won't complain.
That's not to say you shouldn't close tags, because it generally makes code easier to skim (you don't need to remember the above rules).
Consider programming you web-site's UI using Google Web Toolkit. With GWT you write all code in Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.
I think using best practice is the way to go, progressive enhancement is designing with the user in mind and needs to be done with all designers. I believe that a lot of testing on browsers is a good way to ensure proper content is being displayed, many developers over look this.