I am making a Google Chrome extension to change the appearance of the (Webkit) scrollbars. I want them to "blend in" with the rest of the page. What I was thinking of doing is reading the page's background colour and assigning it to the background-color of ::-webkit-scrollbar-track-piece. Is this possible?
Also, is it possible to tell if the scrollbar I'm changing is one of the main ones (as opposed to an in-page one).
P.S: I'm really a beginner when it comes to web development.
With a content script you can read the CSS data, and then inject the proper styles on to the page.
As an example, the following will style just the "body" scrollbars:
body::-webkit-scrollbar {background-color:#000}
No, you can't do it in pure CSS, You'd need at least Javascript to accomplish this, but it's probably impossible in Chrome, and for good reason.
The last time I remember this being possible is in IE6. It's a risky idea in general to change user interface elements that are common to all applications on a platform, because the user has to relearn how to use your application.
Think of the best-designed sites on the internet. You probably don't spend much time wishing their scrollbars blended in better. It's just unnecessary, and the downside (confusing the user) far outweighs the upside (possibly making the scrollbars slightly prettier).
Related
I've developed an instant messaging component using AngularJS that adds instant messaging functionality to any web page. The component is fairly complex it's style sheet runs to about 800 lines.
I'm having a problem when the component is deployed to third party websites. Sometimes the CSS from the host website affects the styles of the chat widget.
The screenshot is used when the component is added to a fresh Wordpress install. You can see that the button text is overridden by the Wordpress style to be upper case.
The problem is this component will be deployed to tens of thousands of websites so it wouldn't be practical to solve each small issue on a case by case basis. It would also be impossible to know if these changes would have a knock on affect to another website.
The approach I'm currently considering is to create a very comprehensive reset stylesheet - I'd override all possible styles on all elements. That would give me a fresh canvas to start with.
This seems like a pretty onerous task so I was wondering if anyone had devised a better solution?
Note:
An iFrame isn't possible because the chat has to overlay the original web page
Like Luca suggested, using a namespace is the correct answer.
While you could use !important or an iframe I dislike both of those answers and here's why.
Why you shouldn't use !important
Your goal is to create CSS that can't be overridden. Using !important
doesn't actually solve that problem. I could still override your
styling by using the same specificity that you have. It is however, a pain to do.
Mozilla specifically recommends that you don't do it.
As you've said yourself, this could be used on 100k+ websites. The likelihood that you're going to override someone else's styling is pretty high. Using !important is going to ruin their day. You've effectively taken the cascading out of CSS. As a rule, use the least amount of specificity that you can comfortably get away with. This makes everyone's life easier.
Why an iframe is not the answer
I'm not nearly as opposed to using an iframe as I am to using !important but there is some negatives that you need to be aware of.
iframes give control to you (the plugin maker) at the cost of the user. e.g. The user has no choice in being able to match your iframe's responsiveness with their site. It's entirely likely that some user is going to have a specific breakpoint that isn't going to play nice with your plugin.
Your styling is impossible to override. This point could be seen as a positive for you but I find that it's a negative to the user. Being able to style the colors of your plugin helps make the plugin a part of the site. It's a guarantee that your plugin's colors won't mesh well with some sites. Letting the user change the colors is a must for me.
Using Namespaces
The idea is pretty simple. Let's say that your app is called SuperIM2000. All you do is make sure that there's a container with the same class name and that you use it to target your styling. This has the added benefit of allowing you to use very simple class names e.g. button.
HTML
<div class="superIM2000">
<input class="button" />
</div>
CSS
.superIM2000 .button{
color:#000;
}
As you can see, the specificity is very low. However, the likelihood that you're going to override someone else's styling is extremely low. This has a benefit to the user as well. It's possible that the button class is already used in their site and it can take advantage of any inheritance that you haven't overridden.
namespace your classes to avoid any possible clashes
reset all styles (super tedious I agree)
if you really want to go hardcore, I would not recommend any of the below but they are available options:
use !important
use inline styling with the above
I have a existing parent website and I have to design a new website with similar theme and css styles.
I do not have access to the code of the parent website in which I can look into the styling.
Is there a way I can extract or replicate the css style of the website and use it for the new one. I just need to get the same theme going in the new website as well.
I came across that I could use some adobe tools for the same.
Can anyone give a brief idea of how this can be done or is there a generic procedure to be followed in replicating the style.
Replicate given design using your own, most appropriate appropriate markup and CSS rules—and have some sort of QA process that will help you find obvious inconsistencies with appearance and interaction.
Why I don't think you want to copy HTML and CSS from the parent site:
The parent website can change its style later in an unpredictable way. You will have to duplicate these changes. Since you mentioned you don't have the access to the codebase, you can't just diff their changes and apply them to your codebase.
Therefore I'd say it's best to ignore the original HTML and CSS, and just follow your eye and have a QA that will carefully test your work for consistency with the original.
(I had to do a similar thing once, and I think it usually isn't required to follow parent website pixel-perfect—just consistent enough to facilitate painless navigation for the end user.
In cases where pixel-perfect consistency is required it makes more sense to build the additional website off the same codebase as original. You weren't given that possibility, so I doubt that perfection will be requested from you.)
I think Your trying to shoot fly with cannon. All javascript/css/html code is at Your hand when viewing sources. No advanced tools are needed.
For better look on minified files You may try developers tools provided by modern browsers like chrome and firefox.
You may also just use beautification tools for css and html like http://www.codebeautifier.com to get nice, indented document.
Just google html or css beautification and find the one that fit Your needs in best way. Most of them are free online tools.
The css is probably minified. This question shows ways to unminify it so you can read it.
Browsers such as Firefox and Chrome have a built in Code Inspector tool that will show you which styles are applied to each item. Just right-click on a page element (for example, a paragraph or heading), and select "Inspect Element" from the menu that appears. A toolbar will appear at the bottom of your window. Use the arrow on the toolbar to select different elements to examine. Usually the left side of that tool shows the HTML for that element and the right-side shows the CSS styles applied and the line of the css they come from. You can get a similar tool in IE by pressing the F12 key.
If you have a text editor that allows regular expressions in the search (Dreamweaver has this if you have the Creative Suite) use this search term with the "regular expression" box checked: #[a-z|0-9]{3,6}. This will find all of the hexadecimal values for the colors you need. It says to find the pound sign followed by either three or six letters or numbers, which will mostly be hexadecimal values (e.g. #333 or #333333 for dark grey). It may also bring up some IDs and you can ignore those and keep searching. You'll also want to search for rgba because colors may be listed that way. Using this in conjunction with the browser's code inspector will help you figure out the colors that are used on different elements. Some things may have background images, so you'll need to use the code inspector to figure that out. The code inspector will also show you how much padding you'll need, widths, etc.
Please forgive my ignorance to all things front-end development - but I was wondering if I have a style that targets images, for example, and then after an arbitrary amount of time a user inserts an image into a content editor (i.e. the image is introduced to the page a long time after the page has been rendered) - will the css style apply to this image? Or is it 'too late'?
Yes, try loading some content with AJAX what should have styles applied. Those will be applied.
But: As #BoltClock pointed out, some older IE-versions don't like this, I suggest you take his comment into account.
Am I the only one wondering why the new update in Opera 11.60 made all standard dropdown menu's look small like on the image beneath?
Is there an "easy" way of fixing this? I guess a fast defined height could solve it, but how would it look in other browsers then.. Is there a universal height of all standard select/dropdowns which could be set?
Don't think I've noticed any such problem. Make sure you don't have extensions, user style sheets or user JS that restyles select elements.
I would recommend that you don't try to change anything in your site's CSS to handle this issue. Adding hacks to handle browser quirks will only make the CSS more brittle in the long run, and this issue is merely cosmetic and may not even be seen by all users.
I have a PSD design file for fixed width site which I'm converting to accessible cross browser xhtml markup. It is not my design and I cannot write server side coding (php, asp.net, etc). My job is to write only XHTML, CSS and javascript/jquery if needed.
What questions should I ask my client before starting the work?
Edit:
Client want Template should be compatible to all A Grade browsers http://developer.yahoo.com/yui/articles/gbs/
and Code should be compatible with screen reader and WCAG 2.0 compatible.
He want if i use javascript then without javascript at least site should be function-able and accessible
Behavior, such as :hover, :focus, animation, etc. are important with PSDs, because they're not obvious.
Are there any concessions the client will be willing to make for certain browsers in order to fulfill for example WCAG requirements? Your work needs to comply, but does the designer's work also comply?
Contingency design: if there are forms, and/or if something goes wrong, what should happen? How should that look? Is there a design for it?
Is it clear what things will be handled server-side and what the client wants handled client-side?
Be careful with charging more for IE6. If you're worth your salt with CSS and use a good reset, it shouldn't really be much of an issue as far as layout/bugs go.
DO discuss what subtle differences are acceptable for IE6 and some other browsers: normal corners instead of rounded corners? Transparency? etc. Some of these things WILL take more time to make work for IE6, and may have performance implications.
Put it on paper, have them sign it, and have them be explicit.
Agree to this: if it's not EXPLICITLY requested/mentioned in the contract, it's not part of your work, because you haven't had an opportunity to estimate costs for it.
Hope this helps.
What browsers does he want it to work in? Double the price if everything has to work in IE6.
Also, do you know what has to happen when certain parts of content are overflowing?
Ask him everything that couldn't fit into a PSD file: animations, client-side data validation, what to do on events, what to do on mouseovers, what to do on overflow, how much speed is an issue (this will effect asset compression, file formats, etc), if he wants the code commented.
A wireframe should provide all the static information: colors, layout, proportions, etc. What you can't tell from a wireframe is the dynamic stuff: link hover styles, menu flyouts, animations, etc.