I would like to test out CSS on a webpage that I don't have direct access to. Does anyone know how to achieve this ?
So I write my CSS, and on save, that code is used on the webpage.
Of cause this will only happen on my local machine
You could use a simple Bookmarklet, similar to how various jQuery Injectors work.
http://mcdlr.com/css-inject/ might do the trick. For something a bit more dynamic (which takes a URL to a CSS file), check out this jsfiddle I've whipped up! It shouldn't be too hard to modify to pass in inline styles, etc.. so should be a good starting point.
javascript:var%20csshref=prompt('enter%20css%20url');var%20s=document.createElement('link');s.setAttribute('href',csshref);s.setAttribute('type','text/css');s.setAttribute('rel','stylesheet');document.getElementsByTagName('body')[0].appendChild(s);void(s);
Re your comment...
You can just use F12 Dev Tools. Chrome, Firefox and IE are all quite good now. (My preference is Chrome).
Related
how can I design CSS (specially in asp.net) which user could not save that in client side? I do not want to use from flash or other embedded technology. only frame and css.
thanks.
I don't think that is possible. CSS is telling the browser how an element is supposed to look, making it so a user can't save/understand it would mean the browser wouldn't know how to read it. If you want to obfuscate the css you can check this >> tools for obfuscating html and css
You cannot really prevent the user from downloading the css. The browser needs HTML and CSS to render the page correctly to the user. So the browser actually queries for the HTML and CSS files from server and loads it.
Also you cannot obfuscate CSS files as browsers cant understand those lines.
There is no possibility, only obfuscation.
Impossible. Modern browsers will even show the cascade, rules, etc. that apply to an element in a developer console. Google Chrome for example, has this.
thanks for all answer. that was useful. but why we can not save complete gmail.com or mail.yahoo.com?
I think they use flash or silver or ....
I have a massive CSS file that is applied to several pages. I'm hoping to break it down to a common CSS file and several page-level CSS files, since it is becoming difficult to work with. Unfortunately, it's not easy to tell what exactly is common. I was hoping there was a way to quickly see what lines/selectors were being used on a given page. Does anyone know of a tool that can do this? I don't want to use developer tools and go through the DOM elements one by one. I'd like to look at the CSS file and see unused selectors grayed out or something. Thanks!
You can use, at least in Chrome, the Audits tab in the developer tools. Once you run it, it says you which styles aren't used in the current page.
Testing it on this site:
And for Firefox there an add-on called CSS Usage – might be worth a look too.
I've just recently downloaded dreamweaver cs6. I've been following tutorials online, and I've run into a bit of a snag. I'm almost embarrassed asking this question, because I know I must be missing something obvious, but here it goes:
I'm following a tutorial right now on making a drop-down menu out of pure CSS. After implementing the first few lines of CSS code I was losing all of my sub menus in the drop-down. After pulling my hair out trying to figure out why for the better part of 2 hours, I finally preview in Firefox. (can't believe I didn't try earlier.)
It all seems to work fine in my browser, but I was wondering: Is there a way I can look at it in Dreamweaver? Its really inconvenient popping in and out of my browser everytime I want to check something. Like I said, I'm basically (not really basically, I just am) a complete noob at all things web-design. Thank you for your time.
Dreamweaver is just an IDE and it is not a browser. It doesn't execute :hover events and JavaScripts. You need to preview what you have done using F12 and check it out. :)
Short answer: no. At least, there's no reasonable expectation that you should. The problem with web-design is that the only real way to do things properly is to code by hand and preview it in a browser in another window - this does come as a culture-shock to "designers" who are used to WYSIWYG programs like Photoshop and InDesign, but the web is a completely different media where the underlying markup matters the most and is open to re-interpretation by browsers.
Dreamweaver has historically had good WYSIWYG rendering (thanks to their partnership with Opera years ago) but ultimately it's still not the best way.
I note that Microsoft's "Expression Blend for HTML/JS Applications" (there's a mouthful) does actually have first-class design-time WYSIWYG support because it works directly with an instance of IE, so you can test things like :hover and client scripts at design time - unfortunately it isn't suited to actual "web" sites - just "desktop" HTML, which is a shame.
What is the easiest way to do it?
I have difficulties to understand and not having now enough time to spend and study Greasemonkey properly, to just apply a PERMANENT css change to ANY website.
I thought that was more easy, to just add a CSS that would stay with the browser. But I do not find any easy/quick tool customization to just add a simple .css file to do my changes.
For example I would like to restyle Twitter, because I hate the new design, It is killing any kind of graphic personalization that I would like to have.
I need it simple, because I want to let people with not high tech knowledge, to be able to get my personalization, implement it and do it as well.
I know that this could have a security issue, but all that I want to do it is add a piece of CSS, and not additional Javascript functionality.
EDIT: Possibly that could work in all the browsers, not only Chrome and Firefox (I know that might not exist, but I would like to have an alternative for people that use IE)
I am an expert web designer, but I am not a programmer. Outside Javascript I do not script anything else.
Install Stylish. Make custom CSS file. Winning.
You're looking for the Stylish extension.
You can add a user stylesheet in several major browsers that will override the site stylesheet. It will require a good working knowledge of CSS though and for firefox you have to create the file manually in your profile.
http://www.squarefree.com/userstyles/user-style-sheets.html
I am a Programmer and not a Designer.
My boss asked me to modify the print.css
I modified the print.css 10 Hours, nothing nothing and nothing happened.
If with IE everything looks good, in FF it looks horrible.
If with FF everything looks good, in IE it looks horrible.
What did i wrong?
Pls have a look at this website
www.trigami.com
Thanks
You could try validating your CSS and your HTML.
If you can get the CSS to look good for each individual browser, just serve different CSS files based on which browser is being used. You can check for IE/CSS on the server, or use a client-side trick.
If you are having specific problems with your CSS - you should ask questions about them, but asking people to "figure out why your site looks horrible" isn't likely to get you much help.
You might start by using a reset CSS, there's this widely from meyerweb.com or the Yahoo option in YUI site, this way you'll reset the nasty defaults from the browsers. After using reset CSS I've found it's easier to get your site running the same in every browser
It's a bit hard to help you if you don't give any details.
But it sounds like you've bee hit by the box model problem