Smart columns com CSS e jQuery | Ao observar outros “liquid based websites”, vejo duas técnicas comumente utilizadas na exibição de colunas: colunas de largura fixa e colunas de largura variada. Há inconvenientes nas duas que eu gostaria de mencionar, e então oferecer a minha solução. Colunas de largura fixa A melhor coisa em se ter colunas de largura fixa em um layout é que elas vão preencher o view port com o máximo de colunas que podem caber dentro dele. Mas, como você pode ver ali, haverá algumas resoluções do view port, em que elas vão deixar um espaço branco em excesso onde uma coluna não foi capaz de caber.
Colunas de largura variada Colunas de largura variada não deixam nenhum espaço branco, e se ajustam perfeitamente dentro de seu layout. Smart columns com CSS & jQuery Uma solução que poderia beneficiar ambas as situações é pegar os dois cenários e os transformar em um só. Comece criando uma lista desordenada que se comportará como colunas. jQuery smartColumns();//Execute the function when page loads Conclusão.
Hover on "Everything But" Adding a hover state to an element is durn easy. Let's use an opacity change as an example: But what if we want to have that hover state apply to everything but the element actually being hovered over? (e.g. other adjacent sibling divs) Let's assume this basic HTML: We'll apply the current CSS properties to all the children of the parent when the parent is in the hover state.
Then when the parent is hovered and the individual div is hovered, we bump the opacity back up, giving the final effect we are looking for. Real World? A similar kind of thing is in the Twitter for Mac app on individual tweets: Demo This idea can be extended into multiple levels of depth. View Demo Download Files And yes, old you-know-who browsers don't do :hover on anything but anchor links. PCSS - CSS Server-side Preprocessor. CSS-Crush – CSS preprocessor. Edit ‘Vendor prefixing’ on Github Vendor prefixes for properties, functions, @-rules and even full declarations are automatically generated – based on trusted sources – so you can maintain cross-browser support while keeping your source code clean and easy to maintain.
In some cases (e.g. CSS3 gradients) final syntax is incompatible with older prefixed syntax. In these cases the old syntax is polyfilled so you can use the correct syntax while preserving full support for older implementations. Edit ‘Variables’ on Github Declare variables in your CSS with a @define directive and use them with the $() function. Variables can also be injected at runtime with the vars option. Conditionals Sections of CSS can be included and excluded on the basis of variable existence with the @ifdefine directive: Edit ‘Direct @import’ on Github Files referenced with the @import directive are inlined directly to save on http requests. Edit ‘Rule inheritance’ on Github Inheritance is recursive: Referencing by name Params. CSS Stress Testing and Performance Profiling / Andy Edinborough. Now let me explain: I have been losing my sanity over the oddest issue. The project I’m working on right now has a fairly complex stylesheet.
Performance for the site is absolutely critical. I’ve done my best to squeeze and optimize every line I can. In all browsers, it runs like a champion. Except IE9. It runs terribly in IE9. Something specific to IE9 was causing a serious performance glitch. Sadly, no one had an answer So, as I lay there in the corner of the closet, weeping bitterly, I realized that writing my own CSS stress tester wouldn’t be that difficult. Of course it took a while to work out the exact implementation. My first implementation was written synchronously. Instead of: var time0 = new Date().getTime(); window.scrollBy(0,100);var delta = (new Date().getTime()) - time0; I needed to add an event handler to window.scroll, scroll the page, then capture time in the event.
(this isn’t how the code is actually written—just showing some insight into the how it works) Zen-coding - Set of plugins for HTML and CSS hi-speed coding. Holmes.css - CSS Markup Detective. What does it do? The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as: Missing required attributes on tags, such as name attributes on inputs (lots of these) Potentially improvable markup, such as links with href="#" Deprecated and Non-W3C Elements - see W3C.org's article on obselete tags Non-W3C Attributes - as above, just the most important ones since there are MANY Thanks to Anthony Mann, holmes now displays an informative error message when you hover over the element.
Support for :after/::after on images is non-existent however in most browsers. How do I use it? Simply download a version of the CSS, minified or normal (with docs), and include a stylesheet link to it on your page. In terms of configuration, such as changing the flag colours: go nuts! Why should I use it? Browser Support Works 100% in Google Chrome 10+ Safari 5+ Opera 10+ Firefox 3.5+
Necolas.github.io/normalize.css/ Spritemapper. 404, not found. Needle: Automated tests for your CSS — Needle 0.1a1 documentation. Needle is a tool for testing your CSS with Selenium and nose. It checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots.
It also provides tools for testing calculated CSS values and the position of HTML elements. Installation If you haven’t got pip installed: As root, or in a virtualenv: Getting started Create test_bbc.py in an empty directory: from needle.cases import NeedleTestCase class BBCNewsTest(NeedleTestCase): def test_masthead(self): self.driver.get(' self.assertScreenshot('#blq-mast', 'bbc-masthead') This is a test case which tells the Selenium web driver (by default Firefox) to open BBC News and check the bar across the top of the page looks correct. assertScreenshot() take two arguments: a CSS selector for the element we are capturing and a filename for the image. To create an initial screenshot of the logo, we need to run Needle in ‘baseline saving’ mode: Selecting a WebDriver. Mgeraci/Less-Boilerplate. .gradientV4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE); hover to see compiled code background: #e2f1cd; background-image: -moz-linear-gradient(top, #f2f1cb, #f0ced6 33%, #ced3f0 66%, #d2f0ce); background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -webkit-linear-gradient(top, from(#f2f1cb), color-stop(0.33, #f0ced6), color-stop(0.66, #ced3f0), to(#d2f0ce)); background-image: -o-linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f2f1cb, endColorstr=#d2f0ce); background-image: linear-gradient(top, #f2f1cb 0%, #f0ced6 33%, #ced3f0 66%, #d2f0ce 100%); .gradientH4(#F2F1CB, #F0CED6, 33, #CED3F0, 66, #D2F0CE);
FFFFALLBACK - A simple tool for bulletproof web typography. Css-x-fire - Allows editing CSS properties in the IDE from Firebug CSS editor. Installation - Screenshots - FAQ - About Many front-end web developers use Firebug for pixelpushing and style tweaking since it has an excellent live view CSS editor. It allows the developer to concentrate on CSS styling without having to refresh the browser. Unfortunately Firebug does not know about your source files. The changes made in the CSS editor are in-memory only. And when refreshing the page all changes are lost. What if the web IDE - which knows about the source files - could record the changes made in Firebug and apply them on the source code?
Well that is exactly the purpose of this IntelliJ IDE (and browser) plugin! See it in action - watch this video (thanks to "goyocode"). Grab the plugin with the plugin manager or from Style with pleasure! This plugin is no longer under development. Source code still available at. Mockko/livereload. Vogue - Auto-reload stylesheets whenever CSS files are saved. Kotatsu. Mobile Boilerplate: A best practice baseline for your mobile web app. Layer Styles. Initializr - Start an HTML5 Boilerplate project in 15 seconds! HTML EMAIL BOILERPLATE v 0.5 updated 11/5.