So there are a lot of resets out there, and there are a lot of form stylers for cross-browser forms. My issue is that none of the resets I can find fully reset forms!
Formalize is great, but I want to style it myself from the ground up, where formalize simply has it already styled.
Is there any reset.css that has full capabilities to reset every form element? If so, where?
This may not be the most informative answer ever but I would strongly recommend creating your own form reset if you can't find one online. A lot of the resets aim to cover just 90% of the browser styling in order to keep code overhead down.
To do it yourself use current resets as inspiration and use the Chrome Inspector tool to find out why a form is styled by default in a particular way and counteract it. Then work with other browsers (with Firebug for Firefox etc) until your form is as consistently styled as possible. You can always add to this reset in future projects if you find things are missing.
If you do decide to create one you should share it on GitHub for others who may need it in the future.
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.
While creating a site I've noticed that IE places things slightly differently from Chrome or Firefox.
I mean I have one thing below another and in Firefox and chrome there is a 15px space between them. But in Ie its more like 25px. I keep reading about designing for all browsers. But how do I do that because If I make it look right in one browser it will always be different in another.
Do I move it to suit IE? Because then it will look wrong in Chrome.
You can keep tweaking your code untill it looks good for all browsers
Another option would be to have a seperate style sheet for IE. this would allow you to design for IE as well but you would need to keep in mind that you have 2 style sheets and would need to work on both when you make changes to your site
First of all welcome to web development!
What you can do is load a "Conditional stylesheet" which will only load in IE,
Chris Coyier from CSS-Tricks does a great job of explaining this so take a look here
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
That should help you out, but it is a tricky task getting everything cross browser compliant but not impossible, just keep at it and you'll get there.
Good luck man!
Try using a css reset first in your style sheet. The reset will customize all the attributes which you can define as per your needs. The main purpose of the css reset is acheiving complete control of all the attributes and defining a generic behaviour for the browsers. Tweaks will help, but in long run, a balanced solution has to be implemented for major things to work out well.
Below are some popular CSS Resets that you can use.
Eric Mayer Reset
Yahoo Reset
Hope this helps.
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).
Is it possible to make cross browser
rendering site without using CSS
reset?
Is CSS Reset for all website, small,
one page, big?
Should we use write all css without
reset then only solve needed
rendering problems nad only keep
needed things in CSS Reset, or we
should use CSS Reset from starting
point?
Should i suggest to use CSS reset to new CSS HTML learner or not? I was thinking if i would suggest to use CSS reset then how he will know why we use CSS Reset. am i right?
Is it possible to make cross browser rendering site without using CSS reset?
It's definitely possible to make sites that render similarly across browsers, but very difficult, whether with a CSS reset or not, to make them render pixel-for-pixel the same across all browsers (personally I don't try that hard unless a client demands I do so). But for most cases, it's doable.
Is CSS Reset for all websites (small, one page, big)?
I've used my own CSS reset for my entire web site as well as single-page side projects. I don't really think it's the size that matters, but again that's just my own opinion. If you want to, you can always make your custom resets simpler for smaller sites, if browser anomalies aren't a big issue.
Should we use write all CSS without reset then only solve needed rendering problems and only keep needed things in CSS Reset, or should we use CSS Reset from starting point?
The point of a CSS reset is not as much to solve rendering problems in individual browsers as it is to strip all default browser styles, whether they're problematic or not, and start from a clean slate. To that end, a CSS reset is mostly meant to be used as a starting point.
Should I suggest to use CSS reset to new CSS/HTML learners or not? I was thinking if I would suggest to use CSS reset then how he will know why we use CSS Reset.
Sure, why not? I think it's great if we share to CSS beginners about the differences in the ways browsers render things by default. As a starter I was also really confused by why Firefox 2 and older chose a default body font of sans-serif instead of serif, while other browsers chose serif. By using a CSS reset we can save beginners time that they'd otherwise spend trying to work their way around browser defaults.
Answering the questions, there is no way to reset all browser's default style by a simple command but CSS Reset.
Obviously the use of the CSS Reset are conditioned by your personal choice, I use to avoid CSS Resetting for simple tableless layouts. Complex layouts like DeviantArt for example could be a good idea to reset all styles.
But the most important point is: Whatever your choice (both are good), do not reset properties that you will not use, and consider to keep your CSS Reset in the same file to save HTTP requests.
It keeps your CSS maintainability for the future.