Entries Tagged as “CSS”
LESS/SCSS Syntax Highlighting in Dreamweaver
I started using less css a short while ago and really like having variables and nesting options for css. The only real downside was Dreamweaver's inability to apply syntax highlighting to files it does not understand. Thankfully the solution is pretty easy and takes only a few seconds.
NOTE: This technique modifies the core configuration files used by Dreamweaver so be sure to make a copy of the file and store it in a safe place until your certain things are working correctly.
We will be modifying the document called MMDocumentTypes.xml located here:
Macintosh HD/Applications/Adobe Dreamweaver CS?/configuration/DocumentTypes/MMDocumentTypes.xml
Windows users, the configuration file is called the same thing, and is located here:
C:\Program Files\Adobe\Dreamweaver CS?\Configuration\DocumentTypes\MMDocumentTypes.xml
Edit the file in a plain text editor. You can use Dreamweaver if you like. You will need to restart Dreamweaver before the changes take effect.
Do a find for "CSS" and modify the either macfileextension="css" and/or winfileextension="css" to include the less file extension. it should look like macfileextension="css,less" when your done.
Also note. If you use Sass you can also add in the scss extension and use the longer scss notations, but the shorter sass extension offers no syntax highlighting since it does not contain the curly braces like css does.
Now save the file and restart Dreamweaver and open your less file and you will see all the syntax highlighting just as you would with traditional css.
→ Respond NowTags: CSS · Software
Don't Reset – Soft Reset
Summary
Soft Reset (for the lack of a good name) is very similar to many of the already popular resets like Meyer Reset or YUI Reset in that the goal it to level the playing field for web developers. What makes this reset different is that it attempts to hone in and reset only the properties that really need to be reset. Leaving some styling to the browser.
My reason for creating this reset is that I wanted a reset that was not overly bloated with unnecessary resets for html properties that I simply didn't use in my layouts. I also didn't think it's necessary to reset every property on the page when sometimes a simple localized class would be sufficient. For example: some sites may only need the main navigation and sub navigation to be reset. Why reset everything only to build it back up for the main content area?
Goals
- Reset common html elements while leaving some items alone
- Slim down the reset by omitting HTML 5 specific elements
- Reduce the need to build up elements when the browser default is acceptable
- Add a reusable class to deal with list that need to be reset
reset.css
/* Soft Reset */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
h1, h2, h3, h4, h5, h6, address, caption { font-style:normal; font-size:100%; font-weight:normal; }
caption, th { text-align:left; }
ol.listreset, .listreset ol, ul.listreset, .listreset ul, .listreset li { margin:0; padding:0; list-style:none; }
Usage
For the most part SoftReset works exactly the same as other resets. The biggest difference is that I abstracted the ordered and unordered list resets into a separate class. Simply apply the class to any list that you need to reset like a navigation for example. Here is an example of how I would use it.
<ul class="navigation listreset">
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
</ul>
Why Create The .listreset Class?
Reusing classes are performance freebies. If you follow the concepts around Object Oriented CSS (OOCSS) you will already know that abstracting these bits of code can greatly improve your application performance. Where as performing a full reset, to build it up again is a big performance drain. If your using a css framework, chances are, your breaking down and rebuilding lists so often, that this single class can save you hundreds of lines of code on a larger site.
Samples And Testing
The YUI 2 reset already had a very comprehensive HTML test page. I ran my reset against it to see how it did. I also created my own HTML test page with many of the same elements with a few additional ones.
NOTE: Use Firebug to turn the reset off and on.
YUI HTML Test Page | My Test Page
Feedback
Since this is just something I am dabbling with, I would appreciate your feedback on this. Maybe it's a good idea? Maybe It's a stupid idea? I urge you to download a copy of the soft reset css and try it out for yourself. See if it works for you. If you have suggestions for improvements I would like to here them in the comments bellow.
→ Respond NowTags: Code · CSS
Applications to help you create more accessible designs
Back in May, I wrote an article on tips for improving your web design. One small piece of that article discussed converting your design to greyscale so that you can get an idea of your color contrast ratio. Though I believe this is important to do, it is a bit time consuming when your in a design grove, and speed is of importance. Sometimes I just want a quick preview to see where I was going or how I was doing thus far in my process.
I remember seeing an online contrast analyzer and decided to look it up to see what it was about. My search turned up quite a few helpful tools that I just had to share with the rest of you. Before I get to the tools, let me take a minute to explain why we would want tools for testing contrast ratios in our designs.
→ Respond NowTags: Accessibility · CSS · Design · Freebies · Software · usability
iPhone Detection Scripts
With iPhones being all the rage these days, I am wondering if mobile versions of your pages might be useful. Viewing a site on an iPhone looks exactly as it does on your desktop. This is all well and good, but sometimes pages can be bloated with images, javascript libraries, and other markup that is not as important to your visitors. I am also a bit upset that the iPhone ignores the css media type of handheld. I wish there were an option to force Safari to render handheld styles as default, but I could not find any option for it. So I set out on a quest to find some alternatives for my iPhone experience.
Coldfusion – I was sure there was a way to get something from the cgi.http_user_agent but not sure if it would just read the agent as webkit. I didn't want to kill Safari desktop users, that would be bad. The Awesome Coldfusion Jedi Ray Camden already had a solution so here it is: (Sorry for the comments around the actual code. Seams that MangoBlog wants to parse the code and run it causing an error. So remove the comments from the cfif statement to make it work. I hope to get a fix for this soon)
<!--- detect iphone --->
<!---
<cfif findNoCase("iphone", cgi.http_user_agent)>
<cflocation url="iphone.html" addToken="false">
</cfif>
--->
Javascript, PHP, and MVC – I ran across a site called iPhone Toolbox that has a ton-o-info on developing for the iphone. (I will be spending some time here for sure.) There is a set of scripts linked up there dealing with how to detect an iPhone users that pretty much covers the rest of the developers. Here is that code
Client-side (javascript):
if (navigator.userAgent.indexOf('iPhone') != -1) {
/* iPhone user */
}
Server-side (example is PHP):
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
/* iPhone user */
}
For sites that use an MVC coding pattern where the programming logic code is separate from the template, the following example is useful:
if (stristr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
$template = 'home/iphone.html';
}
else {
$template = 'home/index.html';
}
If you have any other cool resources, I would love to hear about them. I did run into another site with some code to detect iPhone's and iPod's, but I couldn't make it work, so I have no idea if you have to detect them separately or not. It does speak to the reason why Apple should have an option in the settings pane to make an iPhone or iPod use a handheld stylesheet. But for now at least there is a work around.
→ Respond NowTags: Code · ColdFusion · CSS · General
Text Selection Color
CSS3 brings some cool new features to the web. Some features are highly discussed like rounded corners, borders, and layout control. I am really looking forward to these items becoming standard in the near future. However, I am happy that my two favorite browsers Firefox and Safari already support many of the CSS3 specs. This gives me the ability to use some lesser known items without killing my design for IE. I enjoy some of the simpler things, like the ability to change the text color and background color when text is selected on the page. IE does not currently support this but thats ok… I don't care that much for IE anyway.
Want to add this effect to your site? It's simple. Add this code to your css stylesheet.
*::-moz-selection { background:#FFFFCC; } /* FOR MOZILLA */
*::selection { background:#FFFFCC; } /* FOR SAFARI */
If you want to know more about this tag check out quirksmode.org for additional info and examples. A word of caution must be noted here, If you must validate for css level 2.1 then you will want to forgo this trick as it's not CSS2 compliant.
→ Respond NowTags: Code · CSS · General
