查看进程启动时的环境变量

cat /proc//environ | xargs -0 -n1  
Read More

Custom Scrollbars in WebKit

Way back in the day, you could customize scrollbars in IE (5.5) with non-standard CSS properties likescrollbar-base-color which you would use on the element that scrolls (like the ) and do totally rad things. IE dropped that.
These days, customizing scrollbars is back, but it's WebKit this time. It's a bit better now, because the properties are vendor-prefixed (e.g. ::-webkit-scrollbar) and use the "Shadow DOM". This has been around for a couple of years. David Hyatt blogged itin early 2009 and put together an example page of just about every combination of scrollbar possibilities you could ever want.

The Goods

The Different Pieces

These are the pseudo elements themselves. The actual parts of the scrollbars.
::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

The Different States

These are the pseudo class selectors. They allow for more specific selection of the parts, like when the scrollbar is in different states.
:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive
I'm going to steal this whole section from David's blog post on the WebKit blog because it explains each part well:
:horizontal – The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.
:vertical – The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.
:decrement – The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).
:increment – The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).
:start – The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.
:end – The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.
:double-button – The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.
:single-button – The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.
:no-button – Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.
:corner-present – Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.
:window-inactive – Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

All together now

These pseudo elements and pseudo class selectors work together. Here are some random examples:
::-webkit-scrollbar-track-piece:start {
   /* Select the top half (or left half) or scrollbar track individually */
}

::-webkit-scrollbar-thumb:window-inactive {
   /* Select the thumb when the browser window isn't in focus */
}

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Select the down or left scroll button when it's being hovered by the mouse */
}

Very Simple Example

To make a really simple custom scrollbar we could do this:
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
In which we'd get this on a simple div with vertically overflowing text:

In The Wild

Check out the very subtle and nice scrollbars on Tim Van Damme's blog Maxvoltar (Update September 2012: Tim's site no longer uses this design):
The particularly nice bit here is that the scrollbar is on the body element, yet the scrollbar isn't stuck to the top, bottom, or right edge of the browser window as scroll bars normally are. I made a test page with copy-and-pasteable code to achieve that a similar effect:
On Forrst, they use custom scollbars on code snippets which are also pretty nice. They are less visually intense and so don't fight as much with the code highlighting.

Related
Read More

任务计划 上次运行结果：因为用户未登录到网络，因此未执行所要求的动作

任务计划中的任务不能开机启动，错误信息为：
上次运行结果：因为用户未登录到网络，因此未执行所要求的动作，指定的服务不存在
解决方法：
编辑任务的触发器，将 开始任务 由“启动时”改为“登录时”
编辑任务的触发器，将开始任务有“启动时”改为“登录时”
PS. “启动时”只适用于开机自动登录的用户。

方法二：常规>安全选项>不管用户是否登录都要运行
Read More

HTML5 Custom Data Attributes (data-*)

Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of metadata for the sole purpose of making your JavaScript simpler? If you have, then I have some exciting news for you! If you haven't and you're thinking, Wow, that's a great idea! I implore you to rid your mind of that thought immediately and continue reading.
Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements. These new custom data attributes consist of two parts:
Attribute Name
The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.
Attribute Value
The attribute value can be any string.
Using this syntax, we can add application data to our markup as shown below:
    id="vegetable-seeds">
  

  • data-spacing="10cm" data-sowing-time="March to June">Carrots
    • 
    
  

  • data-spacing="30cm" data-sowing-time="February to March">Celery
    • 
    
  

  • data-spacing="3cm" data-sowing-time="March to September">Radishes
    •
We can now use this stored data in our site’s JavaScript to create a richer, more engaging user experience. Imagine that when a user clicks on a vegetable a new layer opens up in the browser displaying the additional seed spacing and sowing instructions. Thanks to the data-attributes we’ve added to our 
  •  elements, we can now display this information instantly without having to worry about making any Ajax calls and without having to make any server-side database queries.
    Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.
    The spec says (emphasis ours):
    Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
    These attributes are not intended for use by software that is independent of the site that uses the attributes.
    Every HTML element may have any number of custom data attributes specified, with any value.
    W3C Specification

    How can I use data attributes?

    As custom data attributes are valid HTML5, they can be used in any browser that supports HTML5 doctypes. Thankfully, this is pretty much all of them. In addition to aiding backwards compatibility, this also ensures that custom data attributes will remain a scalable, cross-platform solution well into the future.
    Now that we have a broad understanding of what data attributes are, let's take a look at how they can be used:
    • To store the initial height or opacity of an element which might be required in later JavaScript animation calculations
    • To store parameters for a Flash movie that’s loaded via JavaScript
    • To store custom web analytics tagging data as demonstrated by Jason Karns
    • To store data about the health, ammo, or lives of an element in a JavaScript game
    • To power accessible JavaScript  subtitles as demonstrated byBruce Lawson

    What shouldn’t I use data attributes for?

    Although flexible, data attributes aren’t an appropriate solution for all problems.
    • Data attributes should not be used if there is a existing attribute or element which is more appropriate for storing your data. For example, date/time data should probably be presented semantically in a time element instead rather than stored in custom data attributes.
    • Custom data attributes are not intended to compete with microformats. It is clearly stated in the spec that the data is not intended to be publicly usable. External software should not interact with it. Marking up contact details or event details using custom data attributes would be wrong, unless of course it is only intended to be used by your own internal scripts.
    • The presence/absence of a particular data attribute should not be used as a CSS hook for any styling. Doing so would suggest that the data you are storing is of immediate importance to the user and should be marked up in a more semantic and accessible manner.

    Using data- attributes with JavaScript

    Now that we understand what custom data- attributes are and when we can use them, we should probably take a look at how we can interact with them using JavaScript.
    If we wanted to retrieve or update these attributes using existing, native JavaScript, then we can do so using the getAttribute andsetAttribute methods as shown below:
    
id='strawberry-plant' data-fruit='12'>
    This method will work in all modern browsers, but it is not how data-attributes are intended to be used. The second (new and improved) way to achieve the same thing is by accessing an element’s datasetproperty. This dataset property — part of the new HTML5 JavaScript APIs — will return a DOMStringMap object of all the selected element's data- attributes. When using this approach, rather than using the full attribute name, you can ditch the data- prefix and refer to the custom data directly using the name you have assigned to it. Data attribute names which contain hyphens will be stripped of their hyphens and converted to CamelCase.
    
id='sunflower' data-leaves='47' data-plant-height='2.4m'>
    If, at some point in your script, a specific data- attribute becomes redundant and is no longer needed, it is also possible to completely remove that attribute from the DOM element by setting it to a value ofnull.
    plant.dataset.leaves = null; // Caterpillars attack!
    Unfortunately, the new dataset property has not yet been implemented in any browser, so in the meantime it’s best to usegetAttribute and setAttribute as demonstrated earlier.
    While developing your application, you may find it useful to be able to select elements based on the presence of — or indeed the specific values of — their custom data- attributes. This can be achieved quickly and easily using querySelectorAll as shown below:
    // Select all elements with a 'data-flowering' attribute
document.querySelectorAll('[data-flowering]');
// Select all elements with red leaves
document.querySelectorAll('[data-foliage-colour="red"]');

    A word of warning

    As data attributes become more widely used, the potential for clashes in naming conventions becomes much greater. If you use an unimaginative attribute name such as data-height, then it is likely you will eventually come across a library or plugin that uses the same attribute name. Multiple scripts getting and setting a common data-attribute will probably cause chaos. In order to avoid this, I encourage people to choose a standard string (perhaps the site/plugin name) to prefix all their data- attributes — e.g. data-html5doctor-height ordata-my-plugin-height.

    Summary

    Custom data- attributes are a great way to simplify the storage of application data in your web pages. Although you can’t utilise the new JavaScript APIs just yet, you can enjoy great success usinggetAttribute and setAttribute safe in the knowledge that they will work in all major browsers.

    Homework

    If you’re super keen to have a play with the new dataset property but disappointed that it hasn’t been implemented, fear not!, for there is a light at the end of the tunnel. You might be interested in looking at Dr Remy’s experimental code, which partially enables the datasetfunctionality in some browsers by editing the Element.prototype.
    The code supports the retrieval of data- attributes in the latest versions of Firefox, Safari, Opera, and Chrome, but sadly will not work in any version of IE (since IE does not expose the Element object). This code also partially supports the setting of data attributes, but it will only store the new attribute values within the JavaScript and will not update the DOM element as a full, native implementation of thedataset property would. Although this code is mainly a proof of concept, it may be useful for mobile application or intranet development in closed environments where cross-browser (IE) compatibility is not an issue.
    Read More
    Subscribe to: Posts (Atom)