I have been experiencing this issue for a long time. I have a lot of projects with pure html/css/js. in my css file there are a lot of codes in which i have written to get an image from directories. but the problem is that the image does not exist. For example:
.bg-img {
background-image: url("./../img/foo.jpg");
}
in this example foo.jpg does not exist in this directory. but i did not use .bg-img class in html. So this did not caused any problem as i was not using it. But while converting this to React i noticed that React has stricter rules and caused problems with compiling.
So is there any way that i can make react neglect/miss these problems and continue compiling.
By the way, the reason why i have these unnecessary css codes causing problems is that i have copy pasted from another template's css codes and did not removed them as there was a bunch more of them.
So Please don't respond me like: "remove unnecessary css codes"
Thank you for your response :).
Are you using strict mode in React? https://reactjs.org/docs/strict-mode.html Another thing - you should probably simply remove the styles you don't use :) it will help with your warnings/errors as well ;)
Good evening. I'm trying to make a site with Django. Not being expert in CSS I took a template (minimaxing, from html5up.net). Everything works fine, as you can see (http://secret-reaches-8428.herokuapp.com/lesson/lezioneA00/) except that ordered and unordered list are not rendered as such. I can guess is something in the css, but I can't see where the problem is. There are the three .css files loaded in the header:
http://secret-reaches-8428.herokuapp.com/static/css/style.css
//same_domain/style-desktop.css
//same_domain/style.css
Question is: can anybody point out what part of the css is to be modified or, can anybody point out what the problem is?
Ok, I solved looking for standard css attributes and setting up properties as I wanted. Now I'm just curious to understand why the normal html behavior was overwritten, since there is no reference to in the css files.
You have to update your img sources. You have a problem with your img sources, not with your ul or ol rendering.
You try to reach an image here, but it does not exist. Try to fix the URL reference.
When using IE8 to view IE7 through the developer tool's browser mode feature, I am having an odd recurring problem with CSS. When I make changes to an external stylesheet and then reference that class in the HTML, it's like IE7 won't recognize it at all. If, however, I put that same styling inline, IE7 will obey it. Has anyone heard of this before? Here's a simple example to help illustrate what I'm saying:
External stylesheet:
.bold {
font-weight:bold;
}
Call in HTML:
<p class="bold">My paragraph here</p>
No changes will be effective in IE7, although all other browsers are fine.
If however, I do this:
<p style="font-weight:bold;">My paragraph here</p>
IE7 seems happy. What's the difference? Do I really have to make CSS changes this way, or is there another workaround?
I'm baffled as to what the issue could be. I don't know if the developer tool's browser mode has a quirk and doesn't quite work as a real-life version of IE7 would, or if this is something completely different. I am using IE8 (I can't upgrade to IE9 at this government computer), but I've heard the problem persists with my changes in IE9's browser mode of IE7 too.
We're using ColdFusion to generate the HTML, using an HTML5 doctype (), and I've added a timestamp parameter to the 2 external stylesheet references so the browser is forced to grab a new copy every time.
Any help with this mystery would be hugely appreciated - thank you!
======
For #Stano or anyone else who is interested in recreating the exact problem, here is a stripped down version of it: https://docs.google.com/open?id=0B02DZPpIlMwGSk1VZHRDUHNCTkU (Can click File > Download to get the zip). Notice in IE7, "Photographer" is fine because it has inline styling, but the others aren't picking up anything.
With regards to your comments, you're right in saying that it could be a caching issue, but it could also be an issue with that stylesheet (though it doesn't look like that's the case), another stylesheet, or invalid HTML.
One of the things that I want to correct you on, because I think it may influence your understanding of how CSS and HTML interact, is that class attributes in HTML elements do not call CSS. Rather, CSS rules tell the browser agent how to render things with certain attributes. This is why we are able to use the elements ID, name, groupname, class, and other values to identify which elements to apply which class to.
I mention this because if you have invalid HTML (a missing end tag, a missing arrow, etc.) it can do all sorts of weird things. A few days ago it helped me solve an issue where a misplaced tag was actually causing a script of mine to loop on one of my pages.
Take a quick second and validate your HTML using the W3C Markup Validator.
I was wondering whether anyone knows of any tools available that perform the task of analyzing one or more CSS files, determining the similarity between the various rules within the files and presenting the user with options for the merging and reduction of rulesets.
I ask this because a project I am working on has reached the point where it has so much CSS that Internet Explorer (Still the bottom line I'm afraid) chokes on the CSS after page load, causing a 3-5 second lock-up in interactivity until the choke is processed.
In case you're wondering: Yes, I am sure it is the CSS causing this issue.
try any of these links, I much prefer css tidy and have used it successfully in the past.
css optimiser
cleancss
css tidy
There's the YUI CSS Compressor - you could give that a go, but I think it's more for file-size than actually combining rules.
I know this isn't exactly what you're asking for and it goes the opposite and makes your css files larger, but you might get some ideas to manually optimize your CSS organized by this
tool:
http://styleneat.com/index.php?PHPSESSID=j0thilea0b8sjao2vcs8g5ekh1
Again, not tools, but interesting reading:
http://code.google.com/speed/articles/optimizing-css.html
http://meiert.com/en/blog/20080515/css-organization-and-efficiency/
Not quite what you're after, but very useful for trimming down bloated CSS:
http://www.sitepoint.com/dustmeselectors/
Firefox plugin to tell you which CSS declarations are unused.
https://addons.mozilla.org/en-US/firefox/addon/60
Firefox Web Developer Toolbar: CSS > View style information > click on a page element - This'll show you all CSS that applies to an element, and the CSS file/s it's in.
I've just been assigned the task to refactor a huge 5000 line CSS file... but here's the worst part - I also need to make it IE6 compatible. Any CSS gurus have suggestions of tools, or possibly tips (common pitfalls) for use in my monolithic expedition? Cheers.
checkout sass... it includes the ability to convert css to sass.
http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html
A sass file is a yaml file that can be parsed down into a css file. It allows you to use variables and alternate organization...
sass example:
!main_color = #00ff00
#main
:color = !main_color
:p
:background-color = !main_color
:color #000000
css output:
#main {
color: #00ff00; }
#main p {
background-color: #00ff00;
color: #000000; }
Some tips:
Use version control so you can roll back when needed.
Come up with a checklist of visual tests to run through after each change, in each browser. A spreadsheet of URL links and things to look for, building on them as you run across problems (think "unit tests" but not automated).
Use a CSS-specific beautifier first to get everything into the format you prefer for braces, etc.
Consider using something like SASS to "compile" your CSS as you go along.
Comment the heck out of things, especially where you're doing IE6-specific stuff.
Future-proof yourself by building a separate file with IE6-specific directives as you go along, or at least use Microsoft's way of filtering them out for other browsers.
Use the W3C Validation often.
Mechanically, I would attack it like this:
<link type="text/css" href="newhotness.css" />
<link type="text/css" href="newhotness-ie6.css" />
<link type="text/css" href="oldandbusted.css" />
Move code from the third (old) file into the other two, cleaning up as you go. That way you can validate your code without worrying about tons of errors in the old stuff, and you can track your progress, Ctrl-Tab between them more easily than between locations in a single file, etc.
(If you can't control the markup to add your CSS files, use an #import at the top of the old file.)
Start from scratch!
Assuming you can check all the major pages manually, I would be VERY tempted to wipe the entire file and start from scratch. Spot-checking for IE6 inconsistencies, you'll be doing nearly the same amount of work anyway, but it will be much, much more painful if you're modifying old, browser-specific CSS.
That 5000 lines may well be expressable in 2000 lines of modern, well-designed CSS. I think most experienced CSS developers would find it less work to write 2k lines of new CSS than modify 5k lines of horrible CSS.
http://www.codebeautifier.com/
which is based on this:
http://csstidy.sourceforge.net/
Not necessarily CSS, but here's worflow tip: use GIT.
start off by importing the files in git;
commit for every minor step, and record what you did;
whenever you find that you broke something, you can identify the exact same step broke using git bisect ( a good description );
For extra kicks, here's a talk about code coverage for CSS to help you quickly weed out unused rules.
As Triptych said, I would start from scratch. Also, consider the following:
use a CSS reset file to smooth out cross-browser inconsistencies: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
get it working perfectly in Firefox, then tweak for other browsers as needed
study the underlying HTML. How is it organized? Is it laid out with tables? all DIVs? Semantic tagging?
is the CSS used for layout or simply styling (fonts, colors, etc.)?
Once you get a feel for that, study the content. Categorize the layout and elements as much as possible, so that you identify all the common elements and can maximize the efficiency of your CSS
remember the C in CSS, Make the most commonly used font the body font, so that other elements will inherit it by default.
use relative units (ems) for font size, to allow proper scaling of text
try not to use ANY inline styles
make use of Firebug - it will let you inspect an element and see exactly what CSS is in effect and where the rules came from
don't be afraid to re-use portions of the old CSS, especially for things like dropdown menus, which can need very specific incantations to work properly
have fun! starting from scratch lets you implement best practices and learn a ton along the way. When you are done you are probably going to look back on this as a good experience.
there is a presentation here that should get you in the right headspace for tackling this task: CSS Systems
I would be tempted into creating a test suite first: automating page visits (perhaps with Selenium?), taking screenshots, then using something like ImageMagick to compare those with reference images.
Also, I second all the suggestions to use source control. If you later discover that your refactorings broke something that wasn't checked by the test suite, you can add a new test and then bisect your history to find the change that broke it. Git is good for that.
Get a code editor with good syntax highlighting. Also, goodluck I dont envy you.
My initial thought was does some like NCover exist for CSS, as it would be handy to see if all of the CSS is referenced. A quick Google on CSS code coverage found a few things- you might want to look yourself though: http://development.lombardi.com/?p=436
Install sass, run css2sass on your 5000 lines of css, proceed. After you are done with your sass file refactoring, run sass2css to regenerate the css file. Best of luck!
I'd suggest Stylizer - it is a CSS editor with an embedded live preview browser. It makes life much easier when editing CSS files and can tell you which rules affect which element on the page and more.
All of you guys saying he should start from scratch are wrong. You shouldn't. Try to identify the different parts the site uses. Put them on a sheet of paper. Find the parts that match together. Build a structure. Find parts of the application that are the same but are still styled with different rules.
Take that one part and name it. Then match all app parts that use that "pattern" with the correct HTML/CSS.
Repeat until you're done. Break up the large task in small chunks.
Identify whether the original CSS writer used standard methods like using a CSS reset. If he didn't, and everything is defined by #id without reusable classes, well, then maybe the guys saying you should start from scratch are in fact right. But my point here is that you can't just recommend that without assessing the situation.
Using the Dust-Me Selectors Firefox Plugin can be handy. It's a bit like a code coverage tool for CSS.
Tool suggestion: ReSharper by JetBrains. It will autocomplete CSS and rename selectors site wide from the CSS file editing window.