So my buddy asked me what is this, we know it is a type of css but never seen this syntax. We could only guess what it is doing, but I have a one question what is it actually doing? I did not see the whole site just this snippet here
input#{:id}.simple-typeahead-input{
#apply for-text-input;
// never saw input#{:id} like this then connected to the actual class
}
is this common practice with LESS or is it wrong? I have know idea I just started learning SCSS. What does this snippet even do. I can only guess but I would like to know exactly what it does if anyone knows. :)
Related
I probably have a very simple and stupid question, but I just can't figure it out.
I know this is possible with grunt and less, but how-where-and-when...
I want my less line-numbers in my rendered css as comments so I can debug faster and easyer. (I know you can add less to your html for developing reasons but its just cleaner to directly write it in css.)
The following outcome is were I'm searching for:
Could someone send me in the right direction?
Thanks in advance!
On developing frontend-stuff in scss and html5 I have some routines that I rely on like display:inline-block, rgba, css-gradients and so on.
Now dependent on which project I have, browser demands change. I sometimes need to deliver something workable for IE7 and sometimes IE10 is alright too.
Of course I can (and do) real browser checks to check issues, but I thought having a routine upfrontal check wouldn't hurt. So I could run a search within my scss-files to check for the pattern "rgba" and replace it with something appropriate. But that doesn't sound neither very reliable nor modern to me.
Isn't there a way to generate a special set of pattern-fixes for each browser > run it > highlight it to me (or even better already fix it)
Would grunt/gulp be the topic I need to investigate therefore further?
Thanks
As deolectrix said you could look into compass, there is also bourbon, and less. Using grunt/gulp would be highly recommended. For many reasons like concating/minifying your code, or if you write JS you can use something like babel to write ES6 JavaScript.
For cross-browser css autoprefixer would probably help you out. For errors/warnings about troublesome css look into csslint. Hope that helps! It's just a starting point, enjoy diving in.
I know there are several questions concerning unused CSS already, e.g.
How can I find unused images and CSS styles in a website?
or
how can i find unused css in ajax app?
As I understand from these questions and the answers given there it is currently not possible to automatically check for unused CSS for a complete webapp. The problem seems to be that it is nearly impossible to get all HTML that could ever be generated, even if you have access to the source code.
Also note that in my case I want to verify that some CSS is not used rather than finding it in the first place.
Still I guess removing unused CSS is a common task. So how is it done in real-life? I actually have to do this for a larger project. My current plan is to remove some CSS, test it manually and then wait for bug reports. I really hope there is a better way.
Edit: I just realized that this question is not really CSS specific. So when I broadened my search I found What is the best way to remove dead code from your application?. The answer given there mainly says it "is only possible with a really extensive set of tests" (which is not an option for me).
There is no exact solution, but a good workaround I found on css wizardry:
Add something like this to your css:
#suspicious_selector {
background-image: url('/assets/img/dead/suspicious_selector.gif');
}
After some time check for requests to that file. If there were no requests, it is mostly safe to remove the selector.
I know this has been asked before, but I can't find any thread that can exactly help me. I'm a bit of a noob, but I know my way around. Here's what I have so far:
HTML File
https://dl.dropbox.com/u/9757676/Website%20Stuff/Website.html
Javascript file:
https://dl.dropbox.com/u/9757676/Website%20Stuff/script.js
(it wouldnt let me post the code)
is there an easier way to do this, perhaps put all the images into an array? and I also need help making a next and back button, perhaps one problem can solve the other
Check jQuery tools: http://jquerytools.org/demos/tabs/slideshow.html.
It has lots of good plugins that could possibly help you.
I am interested in improving my understanding of CSS. I have been making web pages for a while, but I am still constantly thwarted by bizarre behavior that I can't explain when I try to get things to look the way I want. I have a good bit of development experience and I have no trouble understanding the finer points of Javascript, PHP, or even C. But when it comes to CSS and HTML, I find I am always trying to "trick" my code into working.
This must betray a lack of understanding on my part about how web pages and CSS actually work. Are there any good books or resources I could look at toward the end of truly understanding what is going on under the hood? I always feel like I'm at a loss, but I suspect I could get over that if I just cracked down and did some good reading.
I find I am always trying to "trick" my code into working.
Yep. CSS is often about creating the illusion of the effect you intend, rather than actually doing what you intend.
That said, there are very specific rules, as specified by the W3C. Understanding the visual formatting model can do wonders for your understanding as well. These specs are dense, and often confusing, however, so figuring out specific properties and building knowledge step by step is often the easier way to go. Find tutorials (see links below), or just play with them and see what happens (that's how I learned float and clear).
Even though it's often dead, there are a few SO users who will check the CSS Chat Room regularly (myself included), so if you have general questions (inappropriate for an actual SO question), feel free to ask there, and someone will eventually ping you back.
Also, I've created a Useful CSS Links document with links to official documents, several tutorials, and other CSS resources.
You might be getting mesmerized by the pretty blinking lights and forgetting to watch how everything is connected together. Just like you can get too focused on how a node in the DOM is affected by your javascript, you can't forget about the parents and siblings and how they all fit together. Your biggest problems are probably positioning. Remember how all the elements are connected together and that will solve a lot of confusion.
I'm sure you've already been here, but just in case:
Learn CSS:
http://w3schools.com/css/default.asp
Learn CSS3:
http://w3schools.com/css3/default.asp
However, the best way to learn this stuff is by trial-and-error. HTML and CSS are unique in their forgiving approach to malformation/errors. This, along with the fact that no two browsers render HTML/CSS exactly alike, presents a certain ambiguity that even experienced HTML/CSS developers occasionally grapple with.
Still, learning this stuff is a blast, and really rewarding once you get a handle on it. Happy coding!